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.sr

一月清辉

13565人浏览 · 2020-05-20 10:05:00

一月清辉 · 2020-05-20 10:05:00 发布

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>