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

【摘要】网页中的图片如果没有加载出来有两种情况：第一种是网速不好，图片尚未加载出来，另外一种情况是图片不存在，加载不出来。本文介绍使用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浏览器支持，其它浏览器不支持，所以在这里就不介绍了。

我要打赏