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


Posted in Javascript onJuly 31, 2018

本文实例讲述了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 相关文章推荐
jquery 查找新建元素代码
Jul 06 Javascript
JS去除数组重复值的五种不同方法
Sep 06 Javascript
js实现点小图看大图效果的思路及示例代码
Oct 28 Javascript
javascript框架设计读书笔记之字符串的扩展和修复
Dec 02 Javascript
学习JavaScript设计模式(策略模式)
Nov 26 Javascript
jquery取消事件冒泡的三种方法(推荐)
May 28 Javascript
underscore之Collections_动力节点Java学院整理
Jul 10 Javascript
JavaScript+CSS相册特效实例代码
Sep 07 Javascript
vue实现城市列表选择功能
Jul 16 Javascript
详解微信小程序-扫一扫 wx.scanCode() 扫码大变身
Apr 30 Javascript
vue3.0实现插件封装
Dec 14 Vue.js
浅析vue中的nextTick
Dec 28 Vue.js
JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析
Jul 31 #Javascript
vue实现word,pdf文件的导出功能
Jul 31 #Javascript
在create-react-app中使用css modules的示例代码
Jul 31 #Javascript
详解使用create-react-app添加css modules、sasss和antd
Jul 31 #Javascript
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
Jul 31 #jQuery
Vue导出页面为PDF格式的实现思路
Jul 31 #Javascript
详解微信小程序实现WebSocket心跳重连
Jul 31 #Javascript
You might like
PHP安全防范技巧分享
2011/11/03 PHP
php等比例缩放图片及剪切图片代码分享
2016/02/13 PHP
js对象的复制继承实例
2015/01/10 Javascript
JavaScript转换与解析JSON方法实例详解
2015/11/24 Javascript
jQuery事件绑定用法详解(附bind和live的区别)
2016/01/19 Javascript
JavaScript的设计模式经典之建造者模式
2016/02/24 Javascript
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
2016/10/15 Javascript
JS 实现可停顿的垂直滚动实例代码
2016/11/23 Javascript
jQuery居中元素scrollleft计算方法示例
2017/01/16 Javascript
vue2.0多条件搜索组件使用详解
2020/03/26 Javascript
javascript变量提升和闭包理解
2018/03/12 Javascript
原生实现一个react-redux的代码示例
2018/06/08 Javascript
深入理解Vue router的部分高级用法
2018/08/15 Javascript
用vue-cli开发vue时的代理设置方法
2018/09/20 Javascript
巧妙运用v-model实现父子组件传值的方法示例
2019/04/07 Javascript
微信小程序 Storage更新详解
2019/07/16 Javascript
vue tab切换,解决echartst图表宽度只有100px的问题
2020/07/19 Javascript
[01:02:55]CHAOS vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
[52:20]DOTA2-DPC中国联赛正赛 SAG vs XGBO3 第一场 3月5日
2021/03/11 DOTA
python类定义的讲解
2013/11/01 Python
Python读取图片EXIF信息类库介绍和使用实例
2014/07/10 Python
5款非常棒的Python工具
2018/01/05 Python
Python使用smtp和pop简单收发邮件完整实例
2018/01/09 Python
Python多线程中阻塞(join)与锁(Lock)使用误区解析
2018/04/27 Python
OPENCV去除小连通区域,去除孔洞的实例讲解
2018/06/21 Python
python 函数内部修改外部变量的方法
2018/12/18 Python
python自带tkinter库实现棋盘覆盖图形界面
2019/07/17 Python
css3 矩阵的使用详解
2018/03/20 HTML / CSS
HTML5 Canvas之测试浏览器是否支持Canvas的方法
2015/01/01 HTML / CSS
HTML5中的音频和视频媒体播放元素小结
2016/01/29 HTML / CSS
ONLY瑞典官网:世界知名服装品牌
2018/06/19 全球购物
大学校运会广播稿
2014/02/03 职场文书
自我鉴定标准格式
2014/03/19 职场文书
业绩倒数第一的检讨书
2014/09/24 职场文书
2014年大学团支部工作总结
2014/12/02 职场文书
CSS3中Animation实现简单的手指点击动画的示例
2021/07/15 HTML / CSS