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

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

相关推荐

  • java按位异或的运算是,深入理解按位异或运算符

    java按位异或的运算是,深入理解按位异或运算符参与运算的两个值,如果两个相应bit位相同,则结果为0,否则为1。即:0^0=0,1^0=1,0^1=1,1^1=0按位异或的3个特点:(1)0^0=0,0^1=10异或任何数=任何数(2)1^0=1,1^1=01异或任何数-任何数取反(3)任何数异或自己=把自己置0按位异或的几个常见用途:(1)使某些特定的位翻转例如对数10100001的第2位和第3位翻转,则…

    2022年6月6日
  • 平行线的画法有几种_过直线外一点画平行线的画法

    平行线的画法有几种_过直线外一点画平行线的画法篇一:平行线的画法平行线怎么画平行线的画法平行线怎么画平行线的画法平行线怎么画平行线的画法平行线怎么画平行线的画法平行线怎么画平行线的画法平行线怎么画平行线的画法平行线怎么画平行线的画法平行线怎么画平行线的画法平行线怎么画平行线的画法平行线怎么画平行线的画法篇二:平行线和它的画法9.2平行线和它的画法一、教与学目标:1.学生在自主探究活动中,理解在同一平面内两条直线…

    2022年9月21日
  • yum linux phpmyadmin,Linux centos7 下安装 phpMyAdmin的教程

    yum linux phpmyadmin,Linux centos7 下安装 phpMyAdmin的教程yuminstallhttpdphpmariadb-server–y搭建lamp运行环境之后安装phpMyAdmin遇到的一些问题记录一下1.官网下载phpMyAdmin压缩包wget-chttps://files.phpmyadmin.net/phpMyAdmin/4.9.3/phpMyAdmin-4.9.3-all-languages.tar.gz2.解压缩到/var/www/h…

    2022年5月31日
  • 通俗理解动态库与静态库区别是什么_动态ip和静态ip哪个好

    通俗理解动态库与静态库区别是什么_动态ip和静态ip哪个好引:最近做了算法产品化相关的一些工作,其中涉及到算法库封装的相关工作,封装为动态库。总结动态库和静态库区别和对应使用原则。区别:静态库和动态库最本质的区别就是:该库是否被编译进目标(程序)内部。分别介绍:静态(函数)库一般扩展名为(.a或.lib),这类的函数库通常扩展名为libxxx.a或xxx.lib。这类库在编译的时候会直接整合到目标程序中,所以利用静态函数库编译成…

    2022年9月30日
  • s一般怎么称呼自己的m_教师节到了,聊一聊该怎么称呼尊敬的老师[通俗易懂]

    s一般怎么称呼自己的m_教师节到了,聊一聊该怎么称呼尊敬的老师[通俗易懂]01.Teacher当面看到老师不能直接叫teacher哦,但是你可以用Mr/Mrs/Miss/Ms+surname(姓)的方式来称呼老师们,这四个称谓适用的人群如下:Mr/ˈmɪstər/:(已婚/未婚)男性Mrs/ˈmɪsɪz/:(已婚)女性Miss/mɪs/:(未婚)女性Ms/mɪz/:(已婚/未婚)女性一般来讲,因为Ms不透露女性的婚姻状态,所以用其称呼女…

    2022年6月23日
  • 大数据管理与应用专业总结笔记

    大数据管理与应用专业总结笔记大数据管理与应用专业:数据科学教育特点:不仅依赖于传统的信息管理于信息系统专业,更依赖于计算机、数学、统计等学科。大数据专业十一门涉及广泛的交叉性的学科。大数据时代的下的理念(维克托·迈尔·舍恩伯格):一是更相关性而不是因果性;二是更关注数据的纷繁复杂,而不是数据的精准;三是全部数据,而不是抽样数据。维克托·迈尔·舍恩伯格:维克托·迈尔-舍恩伯格是十余年潜心研究数据科学的技术权威,是最早洞见大数据时代发展趋势的数据科学家之一,也是最受人尊敬的权威发言人之一。**目前的形势:**目前国内新增院校还不多

    2022年6月10日

发表回复

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

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