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

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

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="data: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>

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

vue本地项目配置图片加载失败_vue图片加载失败时用默认图片替换的方法
vue图片加载失败时用默认图片替换的方法前言本文主要给大家介绍的关于vue实现图片加载失败时用默认图片替换的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧方法如下原理 ...
[html] 当img标签中的src图片加载失败时，怎么让它变得更美观呢？
[html] 当img标签中的src图片加载失败时,怎么让它变得更美观呢? 当默认图也失效,就会陷入死循环,需加变量计数,如果是 vue 的话用 @error.once 更妙.在 onerror 给元 ...
[html] img中的src加载失败时如何用默认图片来替换呢？
[html] img中的src加载失败时如何用默认图片来替换呢? img有onerror属性,加载失败时触发error事件但是这种解决方法在error里面替换的默认图片也加载失败的时候会导致问题,需 ...
img图片加载失败时，展示默认图片的方法
1. 图片加载失败时会触发onerror事件,可以通过onerror事件使默认图片代替加载失败的图片 <img src="要展示的图片的地址" onerror="t ...
img图片加载失败时的处理
当想对图片加载失败时进行特殊处理,可以使用onerror事件,里面为需要执行的代码. 如果由于其他原因导致onerror事件里加载图片时又报错,此时有可能会导致栈溢出而弹框报错,我们只需在inerro ...
HTML img图片加载失败时用默认图片替换
原文地址:http://blog.csdn.net/qq_24771775/article/details/50294931 img元素加载图片失败,则变成一个小图标,让页面变得难看.此时如何替换为默 ...
当图片加载失败时，做处理(onerror)(vue)
问题:在写项目时,使用的img标签总会遇到一些奇奇怪怪的图片,不是加载慢就是加载不出来,所以我们做相应的处理,就能使得用户体验更好了解决: 给img标签一个onerror失败事件,在图片加载失败时做 ...
Glide4 加载失败时显示默认图片
// 根据URL的首字母创建一个DRAWABLE TextDrawable drawable = TextDrawable.builder().buildRoundRect(getUrlFirstLe ...
img加载失败时，限制onerror执行次数
在vue中,图片加载失败时,用onerror重复请求10次,如果还是失败,则替换为默认图片的实现 <el-table-column prop="imageUrls" labe ...

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

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

最新文章

热门文章