在网站的前端页面设计中,要考虑到img图片资源的存在性,如果img的src图片资源不存在或显示不出来,则需要显示默认的图片。如何做到呢?
一、监听document的error事件
document.addEventListener("error", function (e) { var elem = e.target; if (elem.tagName.toLowerCase() === 'img') { var notFoundImgSrt = $(elem).attr("notFoundSrc"); if (notFoundImgSrt) { $.get(notFoundImgSrt, null, function (response, status, xhr) { if (xhr.status === 200) elem.src = notFoundImgSrt; }); } } }, true);
img的onerror事件是不冒泡的,因此我们得自己手动写代码,监听document的error事件。如果当前发出error事件的目标是img标签,则找到该img标签的notFoundSrc属性,并通过ajax去判断当前站点是否存在该默认图片,如果存在该默认图片,则将其赋值该img的src属性。
二、设置img标签的notFoundSrc属性
<img src="xxxxx" alt="" notFoundSrc="images/imgNotFound.png"/>
由代码可以看见,xxxxx不是一个真实图片资源的路径,因此:
1、img标签必会触发其error事件;
2、由于我们自定义了一个document的error监听事件,这时document就会捕捉img发出的error事件;
3、执行error事件的逻辑。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步