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 相关文章推荐
谈谈JavaScript中的函数与闭包
Apr 14 Javascript
javascript阻止scroll事件多次执行的思路及实现
Nov 08 Javascript
JS+CSS3模拟溢出滚动效果
Aug 12 Javascript
jQuery dataTables与jQuery UI 对话框dialog的使用教程
Sep 02 Javascript
JQuery遍历元素的后代和同胞实现方法
Sep 18 Javascript
js判断出两个字符串最大子串的函数实现方法
Nov 01 Javascript
Node.js连接MongoDB数据库产生的问题
Feb 08 Javascript
Vue.js实现分页查询功能
Nov 15 Javascript
vue.js做一个简单的编辑菜谱功能
May 08 Javascript
JS双向链表实现与使用方法示例(增加一个previous属性实现)
Jan 31 Javascript
JS绘图Flot如何实现动态可刷新曲线图
Oct 16 Javascript
JavaScript 判断浏览器是否是IE
Feb 19 Javascript
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删除数组中的特定元素的代码
2012/06/28 PHP
微信公众号开发之获取位置信息php代码
2018/06/13 PHP
Javascript的IE和Firefox兼容性汇编(zz)
2007/02/02 Javascript
js 通过html()及text()方法获取并设置p标签的显示值
2014/05/14 Javascript
JS实现很酷的水波文字特效实例
2015/02/26 Javascript
jquery简单实现带渐显效果的选项卡菜单代码
2015/09/01 Javascript
关注jquery技巧提高jquery技能(前端开发必学)
2015/11/02 Javascript
js获取所有checkbox的值的简单实例
2016/05/30 Javascript
JS控制文本域只读或可写属性的方法
2016/06/24 Javascript
easyui datebox 时间限制,datebox开始时间限制结束时间,datebox截止日期比起始日期大的实现代码
2017/01/12 Javascript
微信小程序 使用腾讯地图SDK详解及实现步骤
2017/02/28 Javascript
JavaScript中常见的八个陷阱总结
2017/06/28 Javascript
javascript  删除select中的所有option的实例
2017/09/17 Javascript
使用 Node.js 实现图片的动态裁切及算法实例代码详解
2018/09/29 Javascript
微信小程序3种位置API的使用方法详解
2019/08/05 Javascript
Angular8路由守卫原理和使用方法
2019/08/29 Javascript
在Koa.js中实现文件上传的接口功能
2019/10/08 Javascript
js实现简单抽奖功能
2020/11/24 Javascript
Python网络爬虫神器PyQuery的基本使用教程
2018/02/03 Python
python计算阶乘和的方法(1!+2!+3!+...+n!)
2019/02/01 Python
实例详解Python模块decimal
2019/06/26 Python
libreoffice python 操作word及excel文档的方法
2019/07/04 Python
Python之time模块的时间戳,时间字符串格式化与转换方法(13位时间戳)
2019/08/12 Python
详解查看Python解释器路径的两种方式
2020/10/15 Python
基于python爬取链家二手房信息代码示例
2020/10/21 Python
Python 生成短8位唯一id实战教程
2021/01/13 Python
一款利用纯css3实现的win8加载动画的实例分析
2014/12/11 HTML / CSS
解决CSS3 transition-delay 属性默认值0不带单位失效的问题
2020/10/29 HTML / CSS
简约控的天堂:The Undone
2016/12/21 全球购物
法国春天百货官网:Printemps.com
2020/06/29 全球购物
全国道德模范事迹
2014/02/01 职场文书
中专自我鉴定
2014/02/05 职场文书
省级优秀毕业生主要事迹
2014/05/29 职场文书
关于运动会广播稿50字
2014/10/18 职场文书
白鹤梁导游词
2015/02/06 职场文书
党支部考察鉴定意见
2015/06/02 职场文书