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

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


相关推荐

  • 龙芯架构是自己的吗_debian重装系统

    龙芯架构是自己的吗_debian重装系统龙芯灵珑一体机,型号9s2a,pmon版本LM9103-1.5.9原机硬盘250g,装有debian5和debian6双系统由于在debian6系统下不小心误删除了部分文件,导致系统不能关机,不能重启,故重装。此次安装采用usb安装方式前期准备:(在linux系统下,下载安装文件,解压文件,拷贝到u盘)1,将debian6的安装文件拷贝到u盘(一体机挑u盘,没有u盘可以采用硬盘…

    2022年10月18日
    2
  • SecureCRT解压版使用[通俗易懂]

    SecureCRT解压版使用[通俗易懂]百度网盘提取地址:链接:https://pan.baidu.com/s/1nFwxA27xpED5ugCw09-q8w提取码:9wpd

    2022年5月15日
    43
  • pycharm2021linux 激活码【在线注册码/序列号/破解码】

    pycharm2021linux 激活码【在线注册码/序列号/破解码】,https://javaforall.net/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

    2022年3月20日
    75
  • 以图搜图百度识图_检索什么意思

    以图搜图百度识图_检索什么意思以图识图——基于内容的图片检索CBIR(ContentBasedImageRetrieval)

    2025年10月24日
    2
  • HTML入门与进阶以及HTML5

    HTML入门与进阶以及HTML5目录一、简介1、前端开发最核心技术(1)HTML是什么?(2)CSS(3)JavaScript2、前端开发其他技术二、基础内容1.基础总结2.HTML的基本标签(1)HTML标签(2)head标签(3)body标签3、段落与文字(一)、段落标签(二)、网页特殊符号(三)、自闭合标签(四)、块元素和行内元素(五)、练…

    2022年6月4日
    43
  • 一阶惯性滤波特点_传递函数的固有频率怎么求

    一阶惯性滤波特点_传递函数的固有频率怎么求文章(一)一阶惯性环节采用后置反馈的方式可以实现较精确的系统跟踪性能。上述系统的传递函数为因此启动性能良好,另,一阶惯性环节无超调量,因此可通过修改反馈参数实现最优的跟踪性能。因此在针对温度等变化较小的物理量方面的控制上是较占优势的,但精确跟踪也就意味着出现高频干扰、低频干扰、白噪声时,传感器也会精确地将这些干扰输出。这对一些容易受到干扰的系统是极为不利的。如下图为加入高频正弦信号后上述系统的输出(幅值为1,频率为1000(rad/sec))可见,系统虽然有一定的滤.

    2022年10月5日
    2

发表回复

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

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