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 相关文章推荐
JS实现距离上次刷新已过多少秒示例
May 23 Javascript
jQuery插件slick实现响应式移动端幻灯片图片切换特效
Apr 12 Javascript
js实现向右横向滑出的二级菜单效果
Aug 27 Javascript
jquery判断密码强度的验证代码
Apr 22 Javascript
JS实现Select的option上下移动的方法
Mar 01 Javascript
angular.js分页代码的实例
Jul 27 Javascript
JavaScript实现前端分页控件
Apr 19 Javascript
Node.js环境下Koa2添加travis ci持续集成工具的方法
Jun 19 Javascript
详解在 Angular 项目中添加 clean-blog 模板
Jul 04 Javascript
详细AngularJs4的图片剪裁组件的实例
Jul 12 Javascript
Vue 表单控件绑定的实现示例
Aug 11 Javascript
微信小程序项目实践之验证码倒计时功能
Jul 18 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调用Oracle存储过程
2006/10/09 PHP
本地机apache配置基于域名的虚拟主机详解
2013/08/10 PHP
php 模拟 asp.net webFrom 按钮提交事件的思路及代码
2013/12/02 PHP
php-fpm配置详解
2014/02/12 PHP
PHP封装的一个支持HTML、JS、PHP重定向的多功能跳转函数
2014/06/19 PHP
php实现根据IP地址获取其所在省市的方法
2015/04/30 PHP
页面中body onload 和 window.onload 冲突的问题的解决
2009/07/01 Javascript
JavaScript是否可实现多线程  深入理解JavaScript定时机制
2009/12/22 Javascript
Dreamweaver jQuery智能提示插件,支持版本提示,支持1.6api
2011/07/31 Javascript
Jquery获取复选框被选中值的简单方法
2013/07/04 Javascript
JavaScript访问CSS属性的几种方式介绍
2014/07/21 Javascript
Jquery对select的增、删、改、查操作
2015/02/06 Javascript
javascript中数组方法汇总
2015/07/07 Javascript
Bootstrap每天必学之标签与徽章
2015/11/27 Javascript
js右下角弹出提示框示例代码
2016/01/12 Javascript
BootStrap初学者对弹出框和进度条的使用感觉
2016/06/27 Javascript
JavaScript函数节流的两种写法
2017/04/07 Javascript
vue中的数据绑定原理的实现
2018/07/02 Javascript
详解新手使用vue-router传参时注意事项
2019/06/06 Javascript
[50:20]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第四局
2016/03/06 DOTA
Python+Django在windows下的开发环境配置图解
2009/11/11 Python
python 排列组合之itertools
2013/03/20 Python
Python冒泡排序注意要点实例详解
2016/09/09 Python
Python 安装setuptools和pip工具操作方法(必看)
2017/05/22 Python
Python下实现的RSA加密/解密及签名/验证功能示例
2017/07/17 Python
利用python解决mysql视图导入导出依赖的问题
2017/12/17 Python
Django实现文件上传和下载功能
2019/10/06 Python
python yield和Generator函数用法详解
2020/02/10 Python
Python编程快速上手——strip()函数的正则表达式实现方法分析
2020/02/29 Python
浅谈django 模型类使用save()方法的好处与注意事项
2020/03/28 Python
PyCharm vs VSCode,作为python开发者,你更倾向哪种IDE呢?
2020/08/17 Python
小学秋季运动会报道稿
2014/09/30 职场文书
结婚老公保证书
2015/02/26 职场文书
给老婆的保证书怎么写
2015/05/08 职场文书
SQL 窗口函数实现高效分页查询的案例分析
2021/05/21 SQL Server
JavaScript ES6的函数拓展
2022/01/18 Javascript