当图片加载失败或者没有的情况下显示默认图片_图片加载不出来默认图片-优快云博客

本文介绍了一种处理网页中图片加载失败的方法，通过使用JavaScript实现了图片加载的延迟重试及最大重试次数限制，当图片多次加载失败后将显示默认图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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

<html>
<head>
<title>显示默认图片</title>
<script type="text/javascript">

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,'123456.png',2);" src="666.png" width="200" height="200"/>
<span id="showSpan"></span>
</body>
</html>