JS实现判断图片是否加载完成的方法分析

来源：动视网责编：小采时间：2020-11-27 22:10:53

JS实现判断图片是否加载完成的方法分析

JS实现判断图片是否加载完成的方法分析:本文实例讲述了JS实现判断图片是否加载完成的方法。分享给大家供大家参考，具体如下： 1、onload事件 <!DOCTYPE HTML> <html> <head> <title></title> </head> <body> &l

推荐度：

点击下载本文 文档为doc格式

导读JS实现判断图片是否加载完成的方法分析:本文实例讲述了JS实现判断图片是否加载完成的方法。分享给大家供大家参考，具体如下： 1、onload事件 <!DOCTYPE HTML> <html> <head> <title></title> </head> <body> &l

本文实例讲述了JS实现判断图片是否加载完成的方法。分享给大家供大家参考，具体如下：

1、onload事件

<!DOCTYPE HTML>
<html>
 <head>
 <title></title>
 </head>
 <body>
 <img src="images/background.png">
 <p>loading...</p>
 <script type="text/javascript">
 document.getElementsByTagName("img")[0].onload =function() {
 document.getElementsByTagName("p")[0].innerHTML ='加载完成！';
 }
 </script>
 </body>
</html>

2、complete属性

<!DOCTYPE HTML>
<html>
 <head>
 <title></title>
 </head>
 <body>
 <img src="images/background.png">
 <p>loading...</p>
 <script type="text/javascript">
 function imgLoad(img, callback) {
 var timer = setInterval(function() {
 if (img.complete) {
 callback(img);
 clearInterval(timer);
 }
 }, 50);
 }
 imgLoad(document.getElementsByTagName("img")[0], function() {
 document.getElementsByTagName("p")[0].innerHTML = '加载完成！';
 })
 </script>
 </body>
</html>

3、onreadystatechange事件

<!DOCTYPE HTML>
<html>
 <head>
 <title></title>
 </head>
 <body>
 <img src="images/background.png">
 <p>loading...</p>
 <script type="text/javascript">
 document.getElementsByTagName("img")[0].onreadystatechange = function() {
 if (this.readyState=="complete" || this.readyState=="loaded")
 document.getElementsByTagName("p")[0].innerHTML = '加载完成';
 }
 </script>
 </body>
</html>

注意：只有IE6-IE10支持onreadystatechange事件，其它浏览器不支持。

4、onerror事件

网络状况不好或图片不存在都可能触发onerror事件。

<!DOCTYPE HTML>
<html>
 <head>
 <title></title>
 </head>
 <body>
 <img src="images/notExistImg.png">
 <p>loading...</p>
 <script type="text/javascript">
 document.getElementsByTagName("img")[0].onload =function() {
 document.getElementsByTagName("p")[0].innerHTML ='加载完成！';
 }
 document.getElementsByTagName("img")[0].onerror =function() {
 document.getElementsByTagName("img")[0].src = "images/background.png";
 }
 </script>
 </body>
</html>

触发onerror事件后，会为img指定一个新的图片。

问题：

新图片存在则显示新图片，但若新图片也不存在，则将继续触发onerror，导致页面循环跳动。

解决：

通过将onerror置为null，来防止页面循环跳动。

<!DOCTYPE HTML>
<html>
 <head>
 <title></title>
 </head>
 <body>
 <img src="images/notExistImg.png">
 <p>loading...</p>
 <script type="text/javascript">
 document.getElementsByTagName("img")[0].onload =function() {
 document.getElementsByTagName("p")[0].innerHTML ='加载完成！';
 }
 document.getElementsByTagName("img")[0].onerror =function() {
 document.getElementsByTagName("img")[0].src = "images/backgeound.png";
 document.getElementsByTagName("img")[0].onerror = null;
 document.getElementsByTagName("p")[0].innerHTML ='加载失败！';
 }
 </script>
 </body>
</html>

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript图片操作技巧大全》、《JavaScript运动效果与技巧汇总》、《JavaScript切换特效与技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

JS实现判断图片是否加载完成的方法分析

推荐度：

点击下载本文 文档为doc格式

标签：方法图片的方式

热门焦点

JS实现判断图片是否加载完成的方法分析

JS实现判断图片是否加载完成的方法分析

JS实现判断图片是否加载完成的方法分析

最新推荐

猜你喜欢

热门推荐