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创建Silverlight Plugin以及自定义nonSilverlight和lowSilverlight样式
Jun 28 Javascript
javascript模拟的Ping效果代码 (Web Ping)
Mar 13 Javascript
Knockoutjs的环境搭建教程
Nov 26 Javascript
Javascript闭包实例详解
Nov 29 Javascript
jQuery组件easyui基本布局实现代码
Aug 25 Javascript
js实现无缝滚动图
Feb 22 Javascript
JS+html5制作简单音乐播放器
Sep 13 Javascript
使用AngularJS对表单提交内容进行验证的操作方法
Jul 12 Javascript
深入研究React中setState源码
Nov 17 Javascript
angularjs1.X 重构controller 的方法小结
Aug 15 Javascript
解决layui的input独占一行的问题
Sep 10 Javascript
JS创建自定义对象的六种方法总结
Dec 15 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的知识
2006/11/17 PHP
解析PHP SPL标准库的用法(遍历目录,查找固定条件的文件)
2013/06/18 PHP
json的键名为数字时的调用方式(示例代码)
2013/11/15 PHP
php发送post请求的三种方法
2014/02/11 PHP
PHP设计模式之注册树模式分析
2018/01/26 PHP
基于jquery的图片懒加载js
2010/06/30 Javascript
Javascript中For In语句用法实例
2015/05/14 Javascript
jQuery三级下拉列表导航菜单代码分享
2020/04/15 Javascript
浅谈node.js中async异步编程
2015/10/22 Javascript
JavaScript电子时钟倒计时
2016/01/09 Javascript
文本框只能输入数字的实现方法(兼容IE火狐)
2016/06/25 Javascript
JavaScript和jQuery制作光棒效果
2017/02/24 Javascript
基于jquery的on和click的区别详解
2018/01/15 jQuery
Vue匿名插槽与作用域插槽的合并和覆盖行为
2019/04/22 Javascript
layui清除radio的选中状态实例
2019/11/14 Javascript
Element实现表格嵌套、多个表格共用一个表头的方法
2020/05/09 Javascript
Element MessageBox弹框的具体使用
2020/07/27 Javascript
用Python操作字符串之rindex()方法的使用
2015/05/19 Python
使用Python来开发Markdown脚本扩展的实例分享
2016/03/04 Python
Python实现的随机森林算法与简单总结
2018/01/30 Python
分享Pycharm中一些不为人知的技巧
2018/04/03 Python
python实现textrank关键词提取
2018/06/22 Python
对Python定时任务的启动和停止方法详解
2019/02/19 Python
计算机二级python学习教程(2) python语言基本语法元素
2019/05/16 Python
代码实例讲解python3的编码问题
2019/07/08 Python
django admin 自定义替换change页面模板的方法
2019/08/23 Python
python实现图像全景拼接
2020/03/27 Python
django rest framework serializers序列化实例
2020/05/13 Python
美国知名奢侈美容品牌零售商:Cos Bar
2017/04/21 全球购物
80年代复古T恤:TruffleShuffle
2018/07/02 全球购物
客服服务心得体会
2013/12/30 职场文书
声乐专业大学生职业生涯规划书:理想的未来需要自己去打造
2014/09/20 职场文书
领导干部查摆“四风”问题自我剖析材料思想汇报
2014/10/05 职场文书
2014年质检员工作总结
2014/11/18 职场文书
微信小程序和php的登录实现
2021/04/01 PHP
react合成事件与原生事件的相关理解
2021/05/13 Javascript