前端页面图片加载失败显示默认图片
大家好,又见面了,我是你们的朋友全栈君。
方法有多种:
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” />
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/137205.html原文链接:https://javaforall.cn
相关文章
- 前端用动态规划玩股票
- 前端零基础教学开始第六天 06 – day 多种定位方法 和 精灵图使用 元素的显示与隐藏…[通俗易懂]
- 前端框架:第二章:Layui(类UI ) 框架:关于2.2.5版本没有rate模块的解决方案
- Node.js相比于前端js
- 前端项目启动报错:config buildwebpack.dev.conf.js
- vue项目封装组件_前端组件封装
- 2023前端vue面试题及答案_2023-02-28
- 美团前端经典react面试题整理_2023-02-28
- 美团前端常见react面试题(附答案)_2023-03-01
- 前端一面react面试题指南_2023-03-01
- 【网络安全】前端程序员务必掌握的图片防盗链
- 前端CSS Flex布局8大重难点知识,收藏起来吧
- 前端常见react面试题合集_2023-03-15
- Bootstrap v4.0.0-alpha.3 发布,一个 Web 前端框架详解编程语言
- 端一分钟,Oracle前端掌握全面知识(oracle一分钟前)
- GnomeRAR是一个Linux的RAR归档(www.rarsoft.com)的图形用户界面前端。 GnomeRAR在ANSI C编写GTK +和GNOME
- 端操作两大表关联前端Oracle操作技巧(oracle关联大表在前)
- 前端开发者必备给Redis发送指令的方法(前端操作redis)