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

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


相关推荐

  • 网页内容变化监控提醒

    网页内容变化监控提醒有很多的人都需要查看网站的变化并且提醒,比如说股票的股市,商品的价格等等。这次案例以实时监控天气温度来简要的说明监控方法,监控的时广州的实时气温,网站会不断的更新当前的气温。首先打开软件网页自动操作通用工具PageOperator,在任务菜单中新建一个刷新操作。点击添加按钮,并把网址输入到对应的地方。点击自动获取,获取网站的编码方案,点击添加,…

    2022年7月17日
    39
  • 单片机应用基础知识_51单片机基础知识总结

    单片机应用基础知识_51单片机基础知识总结单片机——硬件基础知识宗旨:技术的学习是有限的,分享的精神是无限的。1、单片机内部资源STC89C52:8KFLASH、512字节RAM、32个IO口、3个定时器、1个UART、8个中断源(1)Flash(硬盘)——程序存储空间——擦写10万次,断电数据不丢失,读写速度慢(2)RAM(内存)——数据存储空间——断电数据丢失

    2022年9月7日
    0
  • datagrip激活码2020 mac_通用破解码

    datagrip激活码2020 mac_通用破解码,https://javaforall.net/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

    2022年3月17日
    146
  • 人生中的4个人

    人生中的4个人

    2021年7月30日
    59
  • linux的vim怎么剪切,Linux.vim.多行复制、删除、剪切

    linux的vim怎么剪切,Linux.vim.多行复制、删除、剪切中间件Study-了解什么是中间件一.中间件含义:中间价是位于各种平台(硬件和操作系统)和各种应用之间的通用服务.帮助应用实现高效的.可靠的消息使应用之间实现便捷的互联互通高效.可靠构建企业应用实现分布式应用的快速搭建和部署注:中间…谈谈我印象中的JVM不足之处研究JVM也有一段时间了,其间也发现了它的很多不足之处,在此一一道来,由于本人对JVM的理解有限,如有错误的地方,还请大家指正:本…

    2022年6月22日
    30
  • Java 技术是什么?

    Java 技术是什么?Java技术既是一种高级的面向对象的编程语言,也是一个平台。Java技术基于Java虚拟机(Javavirtualmachine,JVM)的概念——这是语言与底层软件和硬件之间的一种转换器。Java语言的所有实现都必须实现JVM,从而使Java程序可以在有JVM的任何系统上运行。Java编程语言(Javaprogramminglanguage)与众不同之

    2022年7月8日
    19

发表回复

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

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