js判断页面是否加载完成

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

原文地址:https://www.cnblogs.com/liuqingxia/p/7567537.html