img的onerror事件

使用场景

其实on error使用上是比较简单的。

当我们网站上出现了无效图片，而我们希望用友好的方式告诉用户，而不是显示红叉叉。

w3c上解释的 定义和用法：

onerror 事件会在文档或图像加载过程中发生错误时被触发。

在装载文档或图像的过程中如果发生了错误，就会调用该事件句柄。

W3C上关于onerror的用法

<div>
	demo1 : src 为正确地址 （结果是：src为正确时，显示正确图片，不会显示onerror中的默认图片）
	<img src="../cat.jpg" onerror="javascript:this.src='../video占位图.jpg';" alt="图片显示失败" style="width: 80px;height: 80px;">
</div>

<div>
	demo2 : src 为错误地址（结果是：src为错误时，不会显示alt的错误信息，显示了onerror中的默认图片）
	<img src="http://baidu.com" onerror="javascript:this.src='../video占位图.jpg';" alt="图片显示失败" style="width: 80px;height: 80px;">
</div>

<div>
	demo3 : src 为空 （结果是：src为空时，不会显示alt的错误信息，显示了onerror中的默认图片。因此，src为空也是判断了src加载地址的错误）
	<img src="" onerror="javascript:this.src='../video占位图.jpg';" alt="图片显示失败" style="width: 80px;height: 80px;">
</div>

<script>
	function errorImg(img){
		//alert("OK");
		img.src = "../video占位图.jpg";
		img.onerror = null;
	}
</script>
<div>
	demo4 : src 为错误地址or为空    (用函数的方式实现默认图片替换src加载失败的无效图片）
	<img src="" onerror="errorImg(this)" alt="图片显示失败" style="width: 80px;height: 80px;">
</div>
<div>
	demo5 : 动态创建的img中的onerror	(知识点：转义符)
</div>
<script>
	function moveErrorImg(img){
		console.log("OK");
		img.src = "../video占位图.jpg";
		img.onerror = null;
	}
	var htm = '<img src="" onerror='+moveErrorImg(this)+' alt="图片显示失败" style="width: 80px;height: 80px;">'
	document.write(htm);

	var htm1 = '<img src="" onerror=\'moveErrorImg(this)\' alt="图片显示失败" style="width: 80px;height: 80px;">'
	document.write(htm1 +" ");

	var htm2 = '<img src="" onerror=\"moveErrorImg(this)\" alt="图片显示失败" style="width: 80px;height: 80px;">'
	document.write(htm2 +"<br/>");

	var htm3 = '<img src="" onerror="javascript:this.src=\'../video占位图.jpg\';" alt="图片显示失败" style="width: 80px;height: 80px;">'
	document.write(htm3);

	var htm4 = '<img src="" onerror="javascript:this.src=\"../video占位图.jpg\";" alt="图片显示失败" style="width: 80px;height: 80px;">'
	document.write(htm4 +" ");

	var htm5 = "<img src='' onerror='javascript:this.src=\"../video占位图.jpg\";' alt='图片显示失败' style='width: 80px;height: 80px;'>"
	document.write(htm5 +"<br/>");

</script>

效果如下：