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

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


相关推荐

  • ios激活成功教程软件_qt.qpa.plugin:Could not

    ios激活成功教程软件_qt.qpa.plugin:Could not注意:一定要手动创建文件夹,在相应文件夹下进行操作,否则无法成功生成注册码激活成功教程步骤:1.安装qtp,一路默认下来,到要求输入License的界面2.拷贝mgn-mqt82.exe(下载)到C:\ProgramFiles\MercuryInteractive(自己手动创建)文件夹下3.自己手动创建C:\ProgramFiles\CommonFiles\Mercury

    2022年10月1日
    1
  • Java遍历json_java处理json数据

    Java遍历json_java处理json数据今天需要遍历一下json,但是只查到了遍历一层json的文章,满足不了多层级的json遍历。所以自己写一下,用fastJson处理。所遍历json需要考虑一下多层级的json,需要考虑的就是JSONObject和JSONArray两种情况,对这两种情况做处理,采用递归向下遍历,用instanceof判断递归到的类型,做不同处理。下边贴上代码:publicclassJsonLo…

    2025年8月29日
    4
  • 深度学习之GAN对抗神经网络

    深度学习之GAN对抗神经网络1、结构图2、知识点3、代码及案例#coding:utf-8###对抗生成网络案例#####<imgsrc="jpg/3.png"alt=&qu

    2022年8月4日
    3
  • MyBatis学习4—使用MyBatis_Generator生成Dto、Dao、Mapping

    MyBatis学习4—使用MyBatis_Generator生成Dto、Dao、Mapping由于MyBatis属于一种半自动的ORM框架,所以主要的工作将是书写Mapping映射文件,但是由于手写映射文件很容易出错,所以查资料发现有现成的工具可以自动生成底层模型类、Dao接口类甚至Mapping映射文件。一、建立表结构CREATETABLE`user`(`id`varchar(50)NOTNULL,`username`varchar(18)CHAR

    2022年10月20日
    3
  • ma3d舞台建模教程_3d渲染需要什么配置

    ma3d舞台建模教程_3d渲染需要什么配置2019.8.9更新:Smart3D现在对所有的.s3c文件都进行了加密,已经不能直接设置txt文件,但是依旧可以使用CC_S3CComposer.exe进行编辑创建。但是官网下载的.s3c文件还进一步有设置,不能进行编辑更改,因此请下载我提供的.s3c文件进行操作。以下步骤根据最新.s3c格式进行编写。一、须知:S3C是Smart3D内部格式,实质上是一个分块模型的索引,可以…

    2022年10月7日
    2
  • html5 sexteen,Sexy TV shows blamed for teen pregnancies

    html5 sexteen,Sexy TV shows blamed for teen pregnanciesExposuretosomeformsofentertainmentisacorruptinginfluenceonchildren,leadingteenswhowatchsexyprogramsintoearlypregnanciesandchildrenwhoplayviolentvideogamestoadoptaggressiv…

    2022年5月24日
    57

发表回复

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

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