IMG加载出错处理onerror，并能防止死循环

最新推荐文章于 2023-06-26 17:40:03 发布

iteye_8257

最新推荐文章于 2023-06-26 17:40:03 发布

阅读量665

点赞数

分类专栏：软件程式-JavaScript

本文链接：https://blog.csdn.net/iteye_8257/article/details/82214489

版权

软件程式-JavaScript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

img加载图片偶尔会出错，利用onerror可以加载一个缺省图片，也可以重载同一张图片。

但是都要考虑，重载的图片仍然错误，就会陷入死循环。

下面给出一个带重试次数，并且延迟加载的实现，超过重试次数仍不能正常显示的，显示缺省图片。

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