马富天PHP博客

JavaScript判断网页中图片是否加载的三种方法

生活日志 马富天 2016-06-14 09:11:45 12 0

【摘要】网页中的图片如果没有加载出来有两种情况:第一种是网速不好,图片尚未加载出来,另外一种情况是图片不存在,加载不出来。本文介绍使用JavaScript判断网页中图片是否加载出来的三种方法。

一、图片的onload事件

代码如下:

  1. <img id="img" src="1.jpg" />
  2. <p id="tip">图片尚未加载</p>
  3. <script type="text/javascript">
  4. 	img.onload = function(){
  5. 		tip.innerHTML = "图片已经加载";
  6. 	}
  7. </script>

这种方法所有浏览器都兼容,图片尚未加载的原因可能是图片不存在也可能是图片还在加载过程中。

二、图片的onerror事件

代码如下:

  1. <img id="img" src="1.jpg" />
  2. <p id="tip">图片尚未加载</p>
  3. <script type="text/javascript">
  4. 	img.onerror = function(){
  5. 		tip.innerHTML = "图片不存在";
  6. 	}
  7. </script>

这种方法也是兼容所有浏览器的,这种情况是图片不存在导师图片加载不出来的原因。

三、图片的complete属性

通过不断轮询判断图片的complete属性,代码如下:

  1. <img id="img1" src="http://www.mafutian.net/public/home/style/images/erweima.png">
  2. <p id="p1">图片正在加载中</p>
  3. <script type="text/javascript">
  4.     function imgLoad(img, callback) {
  5.         var timer = setInterval(function() {
  6.             if (img.complete) {
  7.                 callback(img);
  8.                 clearInterval(timer);
  9.             }
  10.         }, 50);
  11.     }
  12.     imgLoad(img1, function() {
  13.         p1.innerHTML = '加载完毕';
  14.     })
  15. </script>

省去轮询,简化代码如下:

  1. <img id="img1" src="http://www.mafutian.net/public/home/style/images/erweima.png">
  2. <p id="p1">图片正在加载中</p>
  3. <script type="text/javascript">   
  4.     if (img.complete) {
  5.         p1.innerHTML = '加载完毕';
  6.     }
  7. </script>

这种情况是图片存在,但是尚未加载出来,每隔50毫秒则检测一次complete属性,如果是true则停止轮询。这个属性所有浏览器都支持。

其实还有一种方法,是通过图片的onreadystatechange事件来检测,缺点是只有IE6-IE10浏览器支持,其它浏览器不支持,所以在这里就不介绍了。

版权归 马富天PHP博客 所有

本文标题:《JavaScript判断网页中图片是否加载的三种方法》

本文链接地址:http://www.mafutian.net/144.html

转载请务必注明出处,小生将不胜感激,谢谢! 喜欢本文或觉得本文对您有帮助,请分享给您的朋友 ^_^

0

0

上一篇《 两种纯CSS实现DIV文字垂直居中的方法 》 下一篇《 引入外部文件的时候为什么省略http: 》
分享到:

暂无评论

评论审核未开启
表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情
验证码