img标签在使用的时候一下几个事件非常的有用-CSDN博客

img标签在使用的时候一下几个事件非常的有用：

onError：当图片加载出现错误，会触发经常在这里事件里头写入将图片导向默认报错图片，以免页面上出现红色的叉叉

onLoad：事件是当图片加载完成之后触发

onAbort：图片加载的时候，用户通过点击停止加载（浏览器上的红色叉叉）时出发，通常在这里触发一个提示：“图片正在加载”<html>

<head>

<script>

/**

* 图片出错处理，可以重加载指定的图片。超过重试次数仍不能正常显示的，显示缺省图片。

* 示例<img οnerrοr="showImgDelay(this,'1.jpg',2)" src="1.jpg">

*

* imgObj:img节点对象

* imgSrc:出错时加载的图片地址

* maxErrorNum:最大出错次数，防止出现死循环

*/

function showImgDelay(imgObj,imgSrc,maxErrorNum){

showSpan.innerHTML += "--" + maxErrorNum;

if(maxErrorNum>0){

imgObj.οnerrοr=function(){

showImgDelay(imgObj,imgSrc,maxErrorNum-1);

};

setTimeout(function(){

imgObj.src=imgSrc;

},500);

}else{

imgObj.οnerrοr=null;

imgObj.src="images/default.jpg";

}

}

</script>

</head>

<body>

<img οnerrοr="showImgDelay(this,'1a.jpg',2);" src="1a.jpg" width="200" height="200"/>

<span id="showSpan"></span>

</body>

</html>
这个不能滥用！！！
对图片要求较高时，如考试报名系统，在线考试系统，显示考生的照片时。

很好的利用这3个事件可以在HTML中实现很多图片的功能

例如：处理图片加载失败情况：<img src="image/1.jpg" width="258" height="178" οnerrοr="this.src='images/isets.jpg'" />

IMG的onerror自动选择最快线路，根据服务器返回错误：<img src="http://dianxin.xxx.com/NotExistsUrl" width="1" height="1"

οnerrοr="location.top.url='http://dianxin.xxx.com/'"/>

<img src="http://wangtong.xxx.com/NotExistsUrl" width="1" height="1"

οnerrοr="location.top.url='http://wangtong.xxx.com/'"/>
复制代码例如，你可能会利用这个onAbort消息来警告用户，提醒他们停止某个重要图像的加载，例如图像映射：
<img src="pics/camnpr.gif" usemap="#map1" onAbort="window.alert('注意:这张照片含有重要的链接,请重新载入.')">