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

前端页面图片加载失败显示默认图片方法有多种: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” />

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

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

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 查看项目安装的webpack版本

    查看项目安装的webpack版本如何查看项目的webpack版本解决方法:在package中”webpack”:”^3.6.0″,只知道项目使用的webpack的版本号大于3.6.0,所以执行以下命令即可看到项目正在使用的版本号命令可参考:http://www.yayihouse.com/yayishuwu/chapter/2731…

    2022年8月10日
    45
  • a4文档打印成a3双面_a4文档如何打印成a3

    a4文档打印成a3双面_a4文档如何打印成a3
    打印设置选择纸张为A3,页面设置时,选择拼页,然后按照4,1;2,3;顺序对文档进行拼页打印即可!不错的方法!要记住哦!

    2025年9月19日
    9
  • RS232接口定义

    RS232接口定义RS232接口定义RS232接口定义  RS-232C接口定义(9芯)针脚定义符号1载波检测DCD2接收数据RXD3发送数据TXD4数据终端准备好DTR5信号地SG6数据准备好DSR7请求发送RTS8清除发送CTS9振铃提示RIPin1Receiv

    2022年7月15日
    18
  • python列表转化字符串_python中怎么把列表转成字符串

    python列表转化字符串_python中怎么把列表转成字符串详细内容python中把列表转成字符串先将列表中的元素全部转化为str类型,然后使用Python的字符串内建函数join对列表中的元素进行连接。实例如下:>>>list1=[‘ak’,’uk’,4]>>>list2=[str(i)foriinlist1]#使用列表推导式把列表中的单个元素全部转化为str类型>>>list2#查…

    2022年6月12日
    37
  • 标志寄存器EFLAGS中的IF标志可以屏蔽MINI中断相应_cpsr寄存器标志位

    标志寄存器EFLAGS中的IF标志可以屏蔽MINI中断相应_cpsr寄存器标志位EFL介绍EFL的所有标志全称如上图所示,前8位(0~7)因为用不到,所以不作介绍,想看的可以点击原文链接。状态控制位1.追踪标志位TF(TrapFlag)当追踪标志TF被置为1时,CPU进入单步执行方式,即每执行一条指令,产生一个单步中断请求。这种方式主要用于程序的调试。指令系统中没有专门的指令来改变标志位TF的值,但可直接通过文末介绍的方法来进行修改。2.中断允许标志位…

    2025年6月20日
    3
  • cocos2d-x精灵移动的方法

    cocos2d-x精灵移动的方法

    2021年11月30日
    36

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

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