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

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

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

时间: 2024-09-30 05:59:53

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

Spring3中js/css/jpg/gif等静态资源无法找到(No mapping found for HTTP request with URI)问题解决(转)

最近项目中使用到Spring3,在感叹Spring3注解配置清爽的同时竟然出现了这个不和谐的事情,实在无法忍受 问题:部署项目后程序加载或用浏览器访问时出现类似的警告,2011-01-19 10:52:51,646 WARN [org.springframework.web.servlet.PageNotFound] -<No mapping found for HTTP request with URI [/sandDemo001/images/1.jpg] in DispatcherServ

用JS改变embed标签的src属性

思路: A.先隐藏embed标签 B.清除embed元素 C.为embed重新赋值,加入Html页面中 1.html代码 <object id="forfun" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="100%" height="100%" codebase="http://fpdownload.macromedia.com/pub

简单分析android textview xml 的属性设置

android:ems 设置TextView的宽度为N个字符的宽度. 这样的好处就是,在定义编辑框空间输入多少字符的时候,可以根据固定的值设置编辑框宽度.保证边框和文字的宽度统一.android:maxems 设置TextView的宽度为最长为N个字符的宽度.与ems同时使用时覆盖ems选项. 一搬也是在控制文字的数据的个数上做了一定的限制android:minems 设置TextView的宽度为最短为N个字符的宽度.与ems同时使用时覆盖ems选项. 同上android:maxLength 限

统一设置UITabBarController管理的所有VC的tabBarItem图标文字的颜色大小等属性

1. 统一设置UITabBarController管理的所有VC的tabBarItem图标文字的颜色大小等属性 //设置字体大小及颜色(可变字典才可用[]方法设值) NSMutableDictionary *attr = [NSMutableDictionary dictionary]; attr[NSFontAttributeName] = [UIFont systemFontOfSize:19]; attr[NSForegroundColorAttributeName] = [UIColor

js+jquery动态设置/添加/删除/获取元素属性的两种方法集锦对照(动态onclick属性设置+动态title设置)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html140/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>

js+jquery动态设置/增加/删除/获取元素属性的两种方法集锦对比(动态onclick属性设置+动态title设置)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html140/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>

CSS+JS实现tab标签切换

实现tab标签切换比较简单,下面先看看我实现的效果: 我主要实现了: 1.tab之间的相互切换: 2.显示选中的tab 下面看看实现代码: css: html,body,div{ font-size: 12px; font-family:"Arial"; } .tab-ui{ width: 400px; height: 300px; position: relative; } .tab-title{ border-top-right-radius:8px; float: left; b

UIWebView之获取所点位置的图片标签和src

UIWebView有自己的UIResgure,如果我们手动加入自己的GestureRecognize将不能识别,如UILongPressGestureRecongnizer. 在浏览网页的时候,如果看到喜欢的图片,想把它保存下来如何办呢? 我们可以自己写一个程序来实现,用uiwebview开发一个自己的浏览器. 上面说到uiwebview不能识别long press gesture,幸好有一个可以识别,那就是double click.因此我们注册它,代码如下 UITapGestureRecogn

使用JS对HTML标签进行增删改查

以下为通过JS对li标签进行简单的增删改查: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script typ