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

前端页面图片加载失败显示默认图片方法有多种:1.首先说我用的,看代码//页面图片加载失败时默认显示统一处理document.addEventListener("error",function(e){  varelem=e.target;  if(elem.tagName.toLowerCase()=="img"){    elem.src="/image/General/errorDef…

大家好,又见面了,我是你们的朋友全栈君。

方法有多种:

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标签中添加:

<img src=“/image.gif” onerror=‘this.src=”default.gif” />

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

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/137205.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • PermitRootLogin yes无效问题

    PermitRootLogin yes无效问题奶奶的,搞了半下午终于找到原因。/etc/ssh/sshd_config明明设置了PermitRootLogin为yes,可就是用putty连,root登录不了,每次都accessdenied。气死我也。同一个集群的另外10几台机器每个都是好的,唯独这一台出问题。到处查资料,翻文章,甚至直接把其他机器的sshd_config拷贝过来还是不行。最后突然想起来,会不会是root尝…

  • 2017年java培训机构排名[通俗易懂]

    2017年java培训机构排名[通俗易懂]俗话说360行,行行转IT,在如今这个互联网横行的时代,做一个Java开发工程师可以算得上是集智慧,钞票为一身的光鲜职业了,尤其是在北上广这一线城市,年薪30w的黄金小鲜肉随处可见,这也是许多高校毕业生,甚至是其它行业工作数年后都望尘莫及的。因为梦想高薪,跨专业,转行的人比比皆是,也就免不了和一些Java培训机构打交道,而如今这世道教育机构也不见得都那么有“良心”就拿北京来说吧,大大小小的Java培训机构不下5000家,这里边有正规做良心教育的,也有浑水摸鱼什么都不是的,有面向全国招生的,也有面向全国“诈骗

  • 随着数据科学家的崛起,谁的地位将发生动摇_算法是谁发明的

    随着数据科学家的崛起,谁的地位将发生动摇_算法是谁发明的作者简介Introduction杨滔,桃树科技(TaoData)创始人,专注于下一代人工智能产品的研发、应用与商业化。拥有超过十年机器学习研究与应用经验。奥克兰大学机器学习博士,悉尼科技大学博士后。曾任阿里巴巴集团数据科学家,建立淘宝网数据科学团队,首创聚划算爆款模型。曾任F团首席科学家,建立F团数据化运营体系。往期回顾如何成为一名卓越的数据科学家——开篇七剑如何成为一名卓越的数据科学家——七剑

  • mongovue查询字段_mongodb查询速度

    mongovue查询字段_mongodb查询速度{“ei”:”AW4BROILANDSTART1″,//条件一”cd”:{$elemMatch:{“0004″:{$gte:0}}}, //条件二,cd为集合,0004为集合中的key”st”:{$gte:ISODate(“2013-09-05T00:00:00.958Z”)}//时间条件,”im”:{$exists:true},”cn”:{$ne:””},

  • jboss安装与配置_拼多多下载安装

    jboss安装与配置_拼多多下载安装一、Jboss下载:1、点击http://jbossas.jboss.org/downloads/找到合适的版本下载;我这里是用的Jboss-as-7.1.1.Final版本,算是比较新的一个版本。二、Jboss安装:1、首先将下好的Jboss解压到自己想要存放的位置;2、配置环境变量(非必要步骤),建议还是将环境变量配好,便于…

  • HotSpot源码分析之类模型

    HotSpot源码分析之类模型

    2020年11月20日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号