在网站的前端页面设计中,要考虑到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 === )
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的属性设置)的更多相关文章

  1. Vue系列——动态设置img标签的src属性

    声明 本文转自:vue动态设置img的src路径 正文 相信开发的小伙伴已经遇到这个问题了,动态切换img标签的src时,写的路径就是不生效,原因是vue并没有把你的路径字符串当做路径来处理,而是直接 ...

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

    原文地址:http://www.programgo.com/article/96083031845/ 最近项目中使用到Spring3,在感叹Spring3注解配置清爽的同时竟然出现了这个不和谐的事情, ...

  3. 用JS改变embed标签的src属性

    思路: A.先隐藏embed标签 B.清除embed元素 C.为embed重新赋值,加入Html页面中 1.html代码 <object id="forfun" classi ...

  4. 设置a标签,实现点击跳转页面的两种效果

    设置a标签,实现点击跳转页面 这个问题,主要是设置a标签的属性target,下面对target属性进行描述: 跳转在同一个窗口 1,target="_self",  它使得目标文档 ...

  5. Vue2.0 【第二季】第7节 Component 组件 props 属性设置

    目录 Vue2.0 [第二季]第7节 Component 组件 props 属性设置 第7节 Component 组件 props 属性设置 一.定义属性并获取属性值 二.属性中带' - '的处理方式 ...

  6. [BS-03] 统一设置UITabBarController管理的所有VC的tabBarItem图标文字的颜色大小等属性

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

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

    android:ems 设置TextView的宽度为N个字符的宽度. 这样的好处就是,在定义编辑框空间输入多少字符的时候,可以根据固定的值设置编辑框宽度.保证边框和文字的宽度统一.android:ma ...

  8. GeneXus笔记本——部分环境属性设置项

    这些属性的设置是我们在做项目的过程中都会设置的属性 当然也因项目而异 这里也只是单纯的记录一下 知识库 属性设置“Maximun numeric length" 效果:设置数值型最大值 版本 ...

  9. 怎么用js设置a标签点击链接改变当前颜色

    怎么用js设置a标签点击链接改变当前颜色 20 例如:多个a标签为白色,当点击其中一个a标签时改变那一个a标签的字体颜色为黄色,并且跳转到对应链接,当点击下一个a标签链接时,下一个为黄色,之前一个恢复 ...

随机推荐

  1. Codeforces 1043 F - Make It One

    F - Make It One 思路: dp + 容斥 首先, 答案不会超过7, 因为前7个质数的乘积大于3e5(最坏的情况是7个数, 每个数都缺少一个不同的因子) 所以从1到7依次考虑 dp[i][ ...

  2. XLua访问C#中的List或者数组

    直接访问即可 以下截图是C#中的List与数组: 现在通过XLua修复一下 RequestRoomListRes 方法(这里主要关注list和数组在XLua中的访问方式,对数组与List的遍历用了两种 ...

  3. C#中统计一个过程消耗的时间

    使用Unity进行的测试,代码如下: using System.Collections; using System.Collections.Generic; using UnityEngine; us ...

  4. English Voice of <<if were a boy >>

    <if i were a boy>中英文歌词: If I were a boy 如果我是个男孩 Even just for a day 就算只是一天 I' roll out of bed ...

  5. JSON格式简介

    一.JSON:JavaScript Object Notation的简写,是一种轻量级数据交换格式. 二.数据类型:标量.序列(数组).映射(key-value) 三.JSON的四个原则 1 .并列数 ...

  6. Spring Cloud之配置中心搭建

    一.配置中心服务端搭建 1)引入相关Maven坐标 <dependency> <groupId>org.springframework.cloud</groupId> ...

  7. 纯CSS方块转化梯形动画

    http://jasonning92.github.io/JasonsBlog/pages/%E7%BA%AFCSS%E6%96%B9%E5%9D%97%E8%BD%AC%E5%8C%96%E6%A2 ...

  8. android ------- TCP与UDP

    TCP TCP(Transmission Control Protocol,传输控制协议) 即传输控制协议,是一种传输层通信协议 特点:面向连接.面向字节流.全双工通信.可靠 面向连接:指的是要使用T ...

  9. Routing a Marathon Race

    直接爆搜的复杂度是2^n,对于n<=40的数据过不了. 考虑优化一下. 发现如果走了一个点后,以后是不可能再经过与它相邻的点的,因为这样走显然不如直接走那个与它相邻的点. 这样每走一步就可以删掉 ...

  10. P2469 [SDOI2010]星际竞速

    在何Au的讲解下终于搞明白了这个以前的坑. 首先考虑最小路径覆盖. 这个题意又要求我们求出的最大流为n-1(这样才能保证路径为1条) 考虑高速航行模式的图怎么建,只需要保证最大流的同时费用最小即可,显 ...