js判断网页是否加载完毕----包括图片

时间 2020-09-20

原文原文链接

在作页面的时候,常常碰到要在页面加载彻底以后再去展示。这时候咱们会直接想到使用window.onload的方式,或者是采用Jquery的ready方法判断,这在必定程度能够搞定。html

window.onload方式浏览器

window.onload =function()
{
    //your code  
}

Jquery的ready方法spa

//: 判断网页是否加载完成     
           document.onreadystatechange = function () {      
               if(document.readyState=="complete") {            
                   document.getElementById('divprogressbar').style.display='none';      
               }     
           }

;(function($,undefined){
    $(function(){
    //your code
    });
})(window.jQuery);

可是上面的方法只能判断Dom的加载状态,不能判断图片是否加载成功。若是碰到页面须要图片加载完成才能展示的状况,咱们就没法搞定了。.net

现提供两种方式判断图片是否加载完成。code

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

这里是使用onload和onerror检测判断,可是有时候不能检测到图片是否加载完成,再使用过程当中,我发现它只是判断全部图片开始加载时就触发了,不过基本能够知足需求。htm

使用complete的图片属性检测对象

这里咱们采用定时器不断检测图片的complete属性,这个比较完美,只有图片确实加载完成时,才会变成真,因此比较可靠,建议采用。blog

参考出处：http://jingyan.baidu.com/article/63acb44a376f5961fcc17ef0.html事件

====================================================================

在网上有不少关于判断图片是否已经加载完毕的文章，可是有的浏览器并不适合，下面小编给你们分享一些有关JavaScript判断图片是否已经加载完毕方法汇总，具体内容以下所示：

一.onload事件

经过监听图片的onload事件，能够判断图片是否已经加载完成，兼容全部的浏览器（w3c推荐方法），代码示例以下

 
          <!DOCTYPE html> 
         
          <html lang= 
          "en" 
          > 
         
          <head> 
         
          <meta charset= 
          "UTF-8" 
          > 
         
          <title>Document</title> 
         
          </head> 
         
          <body> 
         
          <img id= 
          "img1" 
          src= 
          "http://pic1.win4000.com/wallpaper/f/51c3bb99a21ea.jpg" 
          alt= 
          "" 
          > 
         
          <script> 
         
          // 方法一：图片已经下载完 
         
          document.getElementById( 
          'img1' 
          ).onload =  
          function 
          (e){ 
         
          e.stopPropagation(); 
         
          alert(1); 
         
          } 
         
          </script> 
         
          </body> 
         
          </html>

二.判断img对象（DOM）的complete属性

当img加载完成以后，complete对象属性将变为true，代码示例以下：

 
          <!DOCTYPE html> 
         
          <html lang= 
          "en" 
          > 
         
          <head> 
         
          <meta charset= 
          "UTF-8" 
          > 
         
          <title>Document</title> 
         
          </head> 
         
          <body> 
         
          <img id= 
          "img1" 
          src= 
          "http://pic1.win4000.com/wallpaper/f/51c3bb99a21ea.jpg" 
          alt= 
          "" 
          > 
         
          <script> 
         
          // 方法二：img的complate属性 
         
          var 
          timer = setInterval( 
          function 
          (){ 
         
          if 
          (document.getElementById( 
          'img1' 
          ).complete){ 
         
          clearInterval(timer); 
         
          alert(1); 
         
          console.log(document.getElementById( 
          'img1' 
          ).complete) 
         
          } 
         
          }, 10); 
         
          </script> 
         
          </body> 
         
          </html>

亲测该方法一样可兼容全部浏览器

三.onreadystatechange事件

在ie下，img对象与xhr对象同样具备onreadystatechange事件，能够通郭建廷该事件判断图片是否加载完成，代码示例以下：

 
          <!DOCTYPE html> 
         
          <html lang= 
          "en" 
          > 
         
          <head> 
         
          <meta charset= 
          "UTF-8" 
          > 
         
          <title>Document</title> 
         
          </head> 
         
          <body> 
         
          <img id= 
          "img1" 
          src= 
          "http://pic1.win4000.com/wallpaper/f/51c3bb99a21ea.jpg" 
          alt= 
          "" 
          > 
         
          <script> 
         
          document.getElementById( 
          'img1' 
          ).onreadystatechange =  
          function 
          () { 
         
          if 
          (document.getElementById( 
          'img1' 
          ).readyState== 
          "complete" 
          ||document.getElementById( 
          'img1' 
          ).readyState== 
          "loaded" 
          ){ 
         
          alert(1); 
         
          } 
         
          } 
         
          </script> 
         
          </body> 
         
          </html>

该方法仅在ie下可用

参考出处：http://www.jb51.net/article/79233.htm