JavaScript判断图片是否已经加载完毕的方法汇总

最新推荐文章于 2024-10-08 08:17:10 发布

weixin_34400525

最新推荐文章于 2024-10-08 08:17:10 发布

阅读量323

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/ecmasea/p/9235370.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>