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

最新推荐文章于 2024-08-20 10:32:53 发布

Noneyes

最新推荐文章于 2024-08-20 10:32:53 发布

阅读量7.7k

点赞数 2

分类专栏： web 文章标签：图片图片加载失败显示默认图片

本文链接：https://blog.csdn.net/Noneyes/article/details/70255205

版权

web 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

1、在img标签中加上 οnerrοr="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.ο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 onerror="showImgDelay(this,'123456.png',2);" src="666.png" width="200" height="200"/>
<spanid="showSpan"></span>
</body>
</html>