当原图片加载失败时，如何让图片加载上我们默认给的图片

来源：互联网发布：网络交换机图片编辑：程序博客网时间：2024/04/28 20:30

我们可能会遇到这样的问题，当页面中的图片的加载失败时，我们想要该图片加载我们给的默认的图片，我在这里分享一下几种做法，希望对大家有所帮助。

1、在img标签中加上 onerror="this.src='error.png ' ";

2、不想在每个img中都定义onerror事件的话，就使用jquery试试
JavaScript code

$(window).load(function() {
      $('img').each(function() {
        if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
          this.src = './image/logo.gif';
          }
       });
    });

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

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

<html>

<head>
<title>显示默认图片</title>
<scripttype="text/javascript">

functionshowImgDelay(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"/>
<spanid="showSpan"></span>
</body>
</html>

2 0