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

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


相关推荐

  • 关于开源的RTP——jrtplib的使用

    关于开源的RTP——jrtplib的使用

    2021年11月28日
  • 软件类网站源码(诱导类源码)

    /**====================================================================*LicensedtotheApacheSoftwareFoundation(ASF)underone*ormorecontributorlicenseagreements.SeetheNOTICEfile

  • C语言的文件操作_C语言调用文件

    C语言的文件操作_C语言调用文件文件打开与关闭C文件操作用库函数实现,包含在stdio.h中。文件使用方式:打开文件→文件读/写→关闭文件系统自动打开和关闭三个标准文件:标准输入——键盘 stdin标准输出——显示器 stdout标准出错输出—–显示器 stderr文件读写操作当我们把文件打开之后,就可以对它进行读与…

  • c语言delay函数的作用,delay函数 delay() c语言延迟函数

    c语言delay函数的作用,delay函数 delay() c语言延迟函数51单片机C语言中delay函数是怎么定义和使用的?很多时候我们看别人的故事哀其不幸恨其不争等到发现在自己身上好像突然就明白了别人的道理。voidDelay(unsignedinta){unsignedinti;while(a。=0){for(定义一个延时xms毫秒的延时函数voiddelay(unsignedintxms)//xms代表需要延时的毫秒数{u…

  • vscode中搭建Golang开发环境(图文并茂)

    vscode中搭建Golang开发环境(图文并茂)vscode中搭建Golang开发环境第一步下载Go安装包,地址:Go语言中文网,安装完成后的目录如下:通过命令行查看当前版本:第二步配置环境变量,新建两个环境变量,如下:其他平台的配置,可以参考goproxy官网。第三步打开vscode,安装一个Go插件,如下:然后打开一个已有的文件夹,并创建一个hello.go的文件,此时,右下角会提示你要安装相应的应用,选择InstallAll,等待安装即可,安装成功如下:到这里环境就搭建完成了第四步在hello.go文件中编写

    2022年10月12日
  • Linux重启网卡失败_debian重启网卡命令

    Linux重启网卡失败_debian重启网卡命令Linux下解决网卡重启失败:Jobfornetwork.servicefailedbecausethecontrolprocessexitedwitherrorcode

发表回复

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

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