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

前端页面图片加载失败显示默认图片方法有多种: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)
上一篇 2022年6月2日 下午12:36
下一篇 2022年6月2日 下午12:36


相关推荐

  • 【字幕制作】生肉资源的字幕问题解决经验分享 入门科普/一键机翻/在线识别/内嵌封装「建议收藏」

    【字幕制作】生肉资源的字幕问题解决经验分享 入门科普/一键机翻/在线识别/内嵌封装「建议收藏」当你不得不啃一个无内嵌字幕的生肉视频,而又急需中文翻译支持的时候?

    2022年7月27日
    7
  • linux命令杀掉进程_shell脚本获取进程号并杀死进程

    linux命令杀掉进程_shell脚本获取进程号并杀死进程1.查找需要kill掉的线程:ps-elf|grep【线程关键信息】比如:ps-elf|grepjava这样找到所有JAVA线程比如要删除tomcat线程,可以执行:ps-elf|greptomcat这样就可以找到跟tomcat相关的所有线程,从中找到你需要kill掉的线程ID2.强制终止线程:kill-9【线程ID】比如你的线程ID是5645646,那就可以执行:kill-95645646【特殊用法】kill-STOP[pid]发..

    2026年4月18日
    7
  • HTML中的空格字符_dw空格代码怎么打

    HTML中的空格字符_dw空格代码怎么打在学习插入空格字符代码书写方法之前,我们要知道,html代码的空格字符,在浏览器中,总会被压缩为一个字符!也就是说,你在html文本中输入多个空格,但在浏览器中,只会保留显示一个字符,其余的都将被浏览器删除。再打个比如,你在html中输入了8个空格字符,如下图所示:在显示之前,浏览器会删除其余7个,而只保留一个空格字符,如下图所示:也就是说,无论你输入多少个空格字符,在浏览器中显示的永远和上图一样…

    2025年11月18日
    5
  • 积分中值定理_三个中值定理的公式

    积分中值定理_三个中值定理的公式设$f:[a,b]\to\mathbf{R}$是区间$[a,b]$上的连续函数,其中$a,b\in\mathbf{R}$且$a<b$.则存在$a<\varepsilon<b$,使得

    2022年8月4日
    10
  • javaWeb前后台交互(二)[通俗易懂]

    javaWeb前后台交互(二)[通俗易懂]接上一篇javaWeb前后台交互。链接:https://blog.csdn.net/blackplus28/article/details/80603863一、MVC思想责任分离思想.M:Model,数据模型对象.(JavaBean)V:View,视图界面.(JSP,Panel,Window)C:Controller,控制器(Servlet)本次代码采用:Tomc…

    2022年6月13日
    30
  • deb 安装_Ubuntu下安装软件的几种方法

    deb 安装_Ubuntu下安装软件的几种方法1,使用UbuntuSoftware进行软件安装打开UbuntuSoftware应用程序,查找要安装的软件并进行安装,方法与使用软件管家在Windows下安装软件的过程一致。2,使用APT(软件包管理系统)进行软件安装apt是一款安装包管理工具,在Ubuntu下,我们可以使用apt命令进行软件包的安装、删除等操作。例如使用apt-get安装git软件,打开终端,输入sudoapt-…

    2022年5月31日
    39

发表回复

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

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