浏览 7093 次
|
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2011-11-28
最后修改：2011-11-28
img加载图片偶尔会出错，利用onerror可以加载一个缺省图片，也可以重载同一张图片。 但是都要考虑，重载的图片仍然错误，就会陷入死循环。
下面给出一个带重试次数，并且延迟加载的实现，超过重试次数仍不能正常显示的，显示缺省图片。
<html>
<head>
<script>
/**
* 图片出错处理，可以重加载指定的图片。超过重试次数仍不能正常显示的，显示缺省图片。
* 示例<img onerror="showImgDelay(this,'1.jpg',2)" src="1.jpg">
*
* imgObj:img节点对象
* imgSrc:出错时加载的图片地址
* maxErrorNum:最大出错次数，防止出现死循环
*/
function showImgDelay(imgObj,imgSrc,maxErrorNum){
showSpan.innerHTML += "--" + maxErrorNum;
if(maxErrorNum>0){
imgObj.onerror=function(){
showImgDelay(imgObj,imgSrc,maxErrorNum-1);
};
setTimeout(function(){
imgObj.src=imgSrc;
},500);
}else{
imgObj.onerror=null;
imgObj.src="images/default.jpg";
}
}
</script>
</head>
<body>
<img onerror="showImgDelay(this,'1a.jpg',2);" src="1a.jpg" width="200" height="200"/>
<span id="showSpan"></span>
</body>
</html>
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2011-11-28
这个不能滥用！！！
对图片要求较高时，如考试报名系统，在线考试系统，显示考生的照片时。 |
| 返回顶楼 | |
|
发表时间：2011-11-29
又长知识了哈 呵呵
|
| 返回顶楼 | |
|
发表时间：2011-12-06
自己可以滥用下，呵呵！同时学习一下！
|
| 返回顶楼 | |
|
发表时间：2011-12-06
imgObj.src="images/default.jpg"; 要是出错了呢？
|
| 返回顶楼 | |
|
发表时间：2011-12-06
imgObj.onerror=null;
已经把onerror事件清空了，不做任何处理 正常的情况下不会触发onerror，前面已经处理了概率为万分之一的错误，至于亿分之一的错误，完全不必再理会儿，呵呵 |
| 返回顶楼 | |
|
发表时间：2011-12-06
嗯，延时加载，确实有意思。我以前都没想到。
|
| 返回顶楼 | |
