前端页面图片加载失败显示默认图片

前端页面图片加载失败显示默认图片方法有多种 1 首先说我用的 看代码 页面图片加载失败时 默认显示统一处理 document addEventList error function e var elem e target if elem tagName toLowerCase img elem src

方法有多种:

1.首先说我用的,看代码

//页面图片加载失败时 默认显示统一处理
document.addEventListener(“error”, function (e) {

var elem = e.target;
if (elem.tagName.toLowerCase() == “img”) {

elem.src = “/image/General/errorDefault.png”;
}
}, true);

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

var imgObj = new Image();
imgObj.src = ‘默认路径’;

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

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

2.普通的方法:

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

不支持动态添加的元素。

而且也会陷入死循环

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

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


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


编程小号
上一篇 2025-03-13 10:30
下一篇 2025-01-29 10:46

相关推荐

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/hz/136467.html