首先说我用的,看代码

<img src="images/logo.png" onerror="imgerrorfun();" />
<script type="text/javascript"> 
    function imgerrorfun(){ 
        var img=event.srcElement; 
        img.src="默认图片地址"; 
        img.onerror=null; // 控制不要一直跳动 
    } 
</script>


另一种也是比较多人用的

//页面图片加载失败时 默认显示统一处理
document.addEventListener("error", function (e) {
    var elem = e.target;
  if (elem.tagName.toLowerCase() == "img") {
      elem.src = "default.gif";
  }
}, true);

这种写法的好处,可以监听到动态js添加进来的元素,有些人可能会用jq的事件代理delegate或者on(我没有实现,开始以为我代理的不对,后来知道是error事件不支持冒泡),最好先将默认图片预加载:

var imgObj = new Image();
imgObj.src = 'default.gif';

如果默认图片也加载失败,会出现闪烁并且不断触发error方法,陷入死循环。

解决办法就是定义全局变量 num 每触发一次error num++,当num大于某一阀值的时候停止 定义error = null;关闭监听,并且显示alt的内容,做到向下兼容。


一种普通的方法:

$("img").on("error", function () {
    $(this).attr("src", "../img/img.jpg");
});

不支持动态添加的元素。

而且也会陷入死循环


另一种是可以避免陷入死循环的

$("img").one("error", function(e){
    $(this).attr("src", "default.gif");
});


还有一种直接在html标签中添加:

<img src="/image.gif" onerror='this.src="default.gif" />


THE END

非特殊说明,本博所有文章均为博主原创

如若转载,请注明出处:https://www.htmlbk.com/web/607.html