在使用img标签的时候 以下几个事件非常的有用:
1、 onerror 事件
有时,img标签中的src图片加载失败,原来的图片位置会出现一个碎片图标,用户体验会下降。
要想去除载入图片失败时显示在左上角的碎片图标,就要借用img标签的onerror事件和javascript,img标签支持onerror 事件,在装载文档或图像的过程中如果发生了错误,就会触发onerror事件。可以使用一张提示错误的图片代替载入失败的图片。代码如下:
<img src="images/bg.png" onerror="javascript:this.src='images/bgError.png';">
当图片bg.png不存在时,将触发 onerror事件,而 onerror 中又为 img 指定一个bgError.png
图片。也就是说图片存在则显示bg.png,不存在将显示bgError.png。
但问题来了,如果 bgError.png也不存在,则继续触发 onerror事件,导致循环,故出现错误。
说明:如果图片存在,但网络很不通畅,也可能触发 onerror事件。
解决方法:
第一种::.去掉 onerror 代码;或者更改 onerror 代码为其它;或者确保 onerror 中的图片足够小,并且存在。
第二种:
<script type="text/javascript">
function nofind(){
var img=event.srcElement;
img.src="images/bgError.png";
img.onerror=null; //控制不要一直跳动
}
</script>
<img src="images/bg.png" onerror="nofind();" />
2、onLoad事件
onLoad事件是当图片加载完成之后触发
3、onAbort事件
图片加载的时候,用户通过点击停止加载(浏览器上的红色叉叉)时出发,通常在这里触发一个提示:“图片正在加载”