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

前端页面图片加载失败显示默认图片方法有多种: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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 一. WireShark 抓包及常用协议分析「建议收藏」

    一. WireShark 抓包及常用协议分析「建议收藏」WireShark抓包及常用协议分析简介WireShark简介和抓包原理及过程实战:WireShark抓包及快速定位数据包技巧实战:使用WireShark对常用协议抓包并分析原理实战:WireShark抓包解决服务器被黑上不了网总结:简介1.1WireShark简介和抓包原理及过程1.2实战:WireShark抓包及快速定位数据包技巧1.3实战:使用WireSha…

    2025年9月2日
    6
  • 斗战神 拳猴刷图加点

    斗战神 拳猴刷图加点是输出手法,我觉得这个一般来说争议不大,但是很重要一点,BOSS战开始前,一定保证身上有一个蛮横的BUFF,如上图所示。至于顺序分别是:九豆或满豆起手-乱星舞-八荒-极影腿×2-巨猿-神行-

    2022年7月2日
    22
  • 【Java】深入理解Java随机数

    【Java】深入理解Java随机数本文介绍Java随机数的内容

    2022年7月26日
    7
  • translate和paraphrase的区别_conversation dialogue

    translate和paraphrase的区别_conversation dialogueTranslateMessage(&msg);TranslateMessage是用来把快捷键消息转换为字符消息,并将转换后的新消息投递到调用线程的消息队列中。由于Windows对所有键盘编码都是采用虚拟键的定义,这样当按键按下时,并不得字符消息,需要键盘映射转换为字符的消息。字符消息被投递到调用线程的消息队列中,当下一次调用GetMessage函数时被取出。…

    2025年11月8日
    3
  • git版本号管理工具的上手

    git版本号管理工具的上手

    2021年11月24日
    50
  • java虚拟机可以运行的文件_虚拟机的网络模型有

    java虚拟机可以运行的文件_虚拟机的网络模型有Java虚拟机中的内存模型?Java虚拟机运行时内存所有的类的实例(不包括局部变量与方法参数)都存储在Java堆中,每条线程有自己的工作内存(Java栈),不同线程之间无法直接访问对方工作内存中的变量。方法区用于存储被虚拟机加载的类信息、常量、static变量等数据,堆用于存储对象实例,比如通过new创建的对象实例就保存在堆中,堆中的对象的由垃圾回收器负责回收。Java栈用于实现方法调用,每次方法调用就对应栈中的一个栈帧,栈帧包含局部变量表、操作数栈、方法接口等于方法相关的信息,栈中的数据当没有引用指向

    2025年11月25日
    4

发表回复

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

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