img标签加载失败方法(onerror)、加载成功(onload)的方法、readystatechange事件、complete属性

最新推荐文章于 2024-05-09 13:13:01 发布

一月清辉

最新推荐文章于 2024-05-09 13:13:01 发布

阅读量1w

点赞数 1

分类专栏： javascript Vue 文章标签： img的error事件 img的load事件 img的complete属性

原文链接：https://www.jb51.net/article/84136.htm

版权

javascript 同时被 2 个专栏收录

134 篇文章 15 订阅

订阅专栏

Vue

74 篇文章 5 订阅

订阅专栏

1、error事件（img标签加载失败的方法）

< img src=“123” :οnerrοr=“defaultImg()” />

function defaultImg(){     //地址错误时，直接删除img标签
   this.remove()
}
或者
function defaultImg(event){        //地址错误时，设置默认图片
	 let img = event.srcElement;
	 img.src = ‘默认图片地址’;
	 img.onerror = null; //防止闪图
 }

2、onload事件（img标签加载完成的方法）

< img src=“123” :οnload=“successImg()” />

function successImg(){
   //code ......
}

优点：简单易用.
缺点：只能指定一个元素，javascipt代码必须置于图片元素的下方

3、readystatechange事件

<!DOCTYPE HTML>
<html> 
<head> 
<meta charset="utf-">
<title>img - readystatechange event</title>
</head> 
<body>
	<img id="img" src="http://pic.win.com/wallpaper/f/cbbaea.jpg">
	<p id="p">loading...</p>
<script type="text/javascript">
	img.onreadystatechange = function() {
	    if(img.readyState=="complete"||img.readyState=="loaded"){ 
	         p.innerHTML = 'readystatechange:loaded'
	    }
	}
</script>
</body>
</html>

readyState为complete和loaded则表明图片已经加载完毕。测试IE6-IE10支持该事件，其它浏览器不支持。

4、complete属性

<!DOCTYPE HTML>
<html> 
<head> 
<meta charset="utf-8">
<title>img - complete attribute</title>
</head> 
<body>
	<img id="img1" src="http://pic1.win4000.com/wallpaper/f/51c3bb99a21ea.jpg">
	<p id="p1">loading...</p>
<script type="text/javascript">
function imgLoad(img, callback) {
    var timer = setInterval(function() {
		   if (img.complete) {
		      callback(img)
		      clearInterval(timer)
		   }
  }, 50)
}
imgLoad(img1, function() {
    p1.innerHTML('加载完毕')
})
</script>
</body>
</html>

轮询不断监测img的complete属性，如果为true则表明图片已经加载完毕，停止轮询。该属性所有浏览器都支持。

参考链接：https://www.jb51.net/article/84136.htm
参考链接：https://blog.csdn.net/qq_39882537/article/details/90318296

一月清辉

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
img标签加载失败方法(onerror)、加载成功(onload)的方法、readystatechange事件、complete属性

1、error事件（img标签加载失败的方法）< img src=“123” :οnerrοr=“defaultImg()” />function defaultImg(){ //地址错误时，直接删除img标签 this.remove()}或者function defaultImg(event){ //地址错误时，设置默认图片 let img = event.srcElement; img.src = ‘默认图片地址’; img.onerror
复制链接

扫一扫