js判断页面是否加载完成

Posted 2020-10-07 YAZI

1.javascript、jquery:

方法一：

window.onload=function(){

}

 

方法二：

//判断网页是否加载完成

document.onreadystatechange=function(){

        if(document.readyState=="complete"){

                document.getElementById(‘divpro‘).style.display=‘none‘

         }

}

方法三：

;(function($,undefined){

       $(function(){

                //your code

        });

})(window,jQuery);

注：以上的方法只能判断Dom 的加载状态，不能判断图片是否加载成功。如果碰到页面需要图片加载完成才能展现的情况，我们就没法搞定了。先提供两种方法判断图片是否加载完成。

 

 

 

3.使用onload的图片加载事件检测

;(function(){

    var pro=[‘‘,‘‘],//存放图片的路径的数组

           i=0,         //从第几张开始加载

           len=pro.length,   //图片的数量

          load=functon(src){

                   if(i<len){

                           var img_obj=new Image;

                             img_obj.src=src;

                             img_obj.onload=img_obj.onerror=load(pro[i++]);

                    }else{

                              //执行之后的代码

                            }

             };

         load(pro[i]);//开始加载

})()

注：这是使用onload和onerror检测判断，但有时候不能检测到图片是否加载完成，在使用过程中，他只能判断图片所有开始加载时就触发了，不过基本上可以满足需求。

 

 

 

4.使用complete的图片属性检测

；(function(){

       var pro=[‘‘,‘‘],    //存放图片的数组路径

             i=0,    //从第几张开始

             len=pro.length,   //图片的数量

             timer=null,    //计时器句柄

              load=function(src){

                         if(i<len){

                              var img_obj=new Image;

                              img_obj.src=src;

                              timer =setInterval(function(){

                                        if(img_obj.complete){

                                                    clearInterval(timer);

                                                     load(pro[i++])

                                           }

                                 },80);

                            }else{

                                       //执行之后的代码

                                    }

                  }；

             load(pro[i]); //开始加载

})()

注：这里采用定时器不断检测图片的complete属性，这个比较完美，只有图片加载完成时，才回变成真，所以比较可靠，建议采用。

 

参考：https://jingyan.baidu.com/article/63acb44a376f5961fcc17ef0.html