浅谈判断图片是否加载完成的方法
来源:互联网 发布:05式轮式装甲车知乎 编辑:程序博客网 时间:2024/06/07 09:29
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>
1 0
- 浅谈判断图片是否加载完成的方法
- 判断脚本是否加载完成的方法
- avascript判断图片是否加载完成方法整理
- jQuery 判断图片是否加载完成方法汇总
- JavaScript实现判断图片是否加载完成的3种方法整理
- 判断图片是否加载完成的三种方式
- 判断图片是否加载完成的三种方式
- 判断多个图片是否加载完成
- js判断图片是否加载完成
- js判断图片是否加载完成
- JavaScript怎么判断图片是否加载完成?
- js 判断图片是否加载完成
- 如何判断图片是否加载完成
- JS判断图片是否加载完成
- js判断图片是否加载完成
- 怎么 判断图片是否加载完成
- 判断 iframe 是否加载完成的完美方法
- 判断 iframe 是否加载完成的完美方法
- CBSCore 中的字符串 SCZ
- JavaSE程序分析003 静态代码块与构造代码块的小事情
- Problem E: 平面上的点——Point类 (II)
- 安装Cocoapods的步骤及遇到错误
- Hibernate-Transaction(事务)
- 浅谈判断图片是否加载完成的方法
- RESTful API设计系列三:资源
- 构造函数
- 3-5Python中的字符串
- 欢迎使用CSDN-markdown编辑器
- java基础之数值类型转换的问题
- ListView和RecycleView
- 自动装箱
- dubbo对传统项目服务化改造