欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  后端开发

JS怎么实现网页加载的进度百分比??

程序员文章站 2022-05-02 09:07:11
...

回复内容:

不一定要非常精确的百分比,能在几个关键点给出正确值,其他中间值用程序瞎编就行了 在head里内嵌script标签,越靠前越好,一定要写在所有外联css、js文件之前

页面要加载多少个css、多少个js你肯定是知道的对不对~
而内联的style和script加载时间基本可以忽略不计~
所以监听文件加载完成的百分比就可以粗略当成页面加载的百分比了,比如一共10个文件,第三个文件加载完成了就设为30%

————css检测:
css检测加载完成最妥的方法就是写一个预定的样式,比如#link_style_onload_check{opacity:0.3;},放到css文件的结尾;

然后创建一个dom,id设为link_style_onload_check(事先加载哪些样式肯定是可以商定的),扔到body里

写一个轮询,间隔5毫秒就可以,如果检测到这个dom的opacity值为0.3,就证明样式加载完成

————js检测:
js也一样,结尾为window或别的全局对象上挂一个约定的值,比如window.link_script_onload_check=true;
同样建立轮询,就可以检测脚本的完成(虽然用onload更直接一些...但是拿到script标签的句柄是个麻烦事)

————html检测:
html加载很快的,直接监听document.body的onload事件就可以;也可以监听一些主要的dom,最好通过id否则性能太烂了,非要querySelector的话IE67就废了

最后为防万一,再绑个window的onload,完成后设为100%