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

1、 事件

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

2、complete属性

<!DOCTYPE HTML>
<html>
  <head>
    < ></ >
  </head>
  <body>
    <img src="images/background.png">
    <p>loading...</p>
    <  type="text/ ">
      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 = '加载完成！';
      })
    </ >
  </body>
</html>

3、 事件

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

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

4、 事件

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

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

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

问题：

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

解决：

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

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

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

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

继续阅读与本文标签相同的文章

无标签
最新文章 最热文章
收藏 打印

特别推荐 2026年05月16日 星期六

精彩发现

热门标签

阻止表单提交 窗口 关闭浏览器 清除 CDATA css文件 光标位置 坐标 javascrpt !important 超链接 数字

相关文章