今天在做一个页面的时候遇到图片加载不出,chrome错误死循环。原因是图片使用了onerror事件进行处理,原始图片加载失败则显示默认图片,而默认图片路径错了,导致一直陷入死循环!
网上挖到一段限制重载的代码,分享下!

<html>
<head>
<script>
/******
&nbsp;* 图片出错处理,可以重加载指定的图片。超过重试次数仍不能正常显示的,显示缺省图片。
&nbsp;* 示例<img onerror="showImgDelay(this,'error.jpg',2)" src="12345.jpg">
&nbsp;*
&nbsp;* imgObj:img节点对象
&nbsp;* imgSrc:出错时加载的图片地址
&nbsp;* 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,'error.jpg',2);" src="123456.jpg" width="200" height="200"/>
<span id="showSpan"></span>
</body>
</html>

标签: 网站建设, 代码分享

添加新评论