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

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


相关推荐

  • 移动APP漏洞自动化检测平台建设

    移动APP漏洞自动化检测平台建设前言:本文是《移动APP客户端安全笔记》系列原创文章中的第一篇,主要讲的是企业移动APP自动化漏洞检测平台建设,移动APP漏洞检测发展史与前沿技术,APP漏洞检测工具与平台,以及笔者的一些思考。希望能对移动App自动化漏洞检测感兴趣的同学有所帮助,限于笔者技术水平与文章篇幅,有些内容暂没有逐一详细分析,后续我争取多学习多分享,在此也欢迎大家指点和交流。一、国内AndroidApp漏洞检测

    2022年5月27日
    31
  • pytorch交叉熵损失函数_yolov5损失函数

    pytorch交叉熵损失函数_yolov5损失函数均方损失函数:这里,loss,x,y的维度是一样的,可以使向量或者矩阵,i是下标。很多的loss函数都有size_average和reduce两个布尔类型的参数,因为一般损失函数都是直接计算batch的数据,因此返回的loss结果都是维度为(batch_size,)的向量。1)如果reduce=False,那么size_average参数失效,直接返回向量形式的loss2)如果…

    2022年9月17日
    2
  • anaconda卸载后问题

    anaconda卸载后问题anaconda卸载后问题因platformio问题,我将电脑中的anaconda卸载后,出现重新安装anaconda后,无法使用(无conda命令,无jupyter,spyder等图标的问题);经搜索,通过安装miniconda后,用conda命令安装anaconda解决了问题。但除了了使用anacondaprompt时,出现系统找不到指定路径的提示,比较碍眼,(同cmd亦是)。经查,将注册表中的anaconda字符改为miniconda也能解决问题;如下图…

    2022年6月17日
    142
  • Odin Inspector 系列教程 — Value Dropdown Attribute

    Odin Inspector 系列教程 — Value Dropdown AttributeValueDropdownAttribute特性用于任何属性,并使用可配置选项创建下拉列表。使用此选项可为用户提供一组特定的选项供您选择。也就是创建一些特殊的下拉条这个里面的属性就有点多了,达到了16个!!!下面笔者逐个讲解MemberName,也是唯一一个有参构造函数需要的属性,有两种形式的Drop下拉条,一种是直接数值的,另一种是Key-Value形式的…

    2022年7月21日
    16
  • Yarn application has already exited with state FINISHED

    Yarn application has already exited with state FINISHED

    2022年2月21日
    71
  • 跨境电商erp源码java大卖先生_erp 开源

    跨境电商erp源码java大卖先生_erp 开源1订单管理本模块支持多平台订单自动下载同步以及多帐号多店铺订单管理,方便用户对销售进行科学、直观的分类管理。包括订单处理,包装验货,称重出库,智能交运,交运日志,快速拣货,快速发货等子模块。2商品管理(SKU)商品管理模块,提供对亚马逊店逊商品进行线下管理的功能,包括但不限于中文名称、英文名称,售价等相应管理3.采购管理采购管理主要对于商品采购、入库、及供应商的设置,并于商品细分,包括采购管理、入库管理和供应商管理模块。4.物流管理此模块主要提供用户设置速…

    2022年9月20日
    3

发表回复

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

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