分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 运营维护

js 设置img标签的src资源无法找到的替代图片(通过img的属性设置)

发布时间:2023-09-06 01:58责任编辑:蔡小小关键词:js

在网站的前端页面设计中,要考虑到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事件的逻辑。

js 设置img标签的src资源无法找到的替代图片(通过img的属性设置)

原文地址:https://www.cnblogs.com/williamwsj/p/9132657.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved