图片加载失败时,显示默认图片
当我们页面中需要加载一些图片时,可能由于网络问题,或者图片文件缺失等问题,导致图片不能正常展示
我们希望有一种降级处理的方式,可以在图片加载失败后显示一张我们预先设定好的默认图片
1.监听图片的 error 事件
由于图片加载失败后,会抛出一个 error 事件,我们可以通过监听 error 事件的方式来对图片进行降级处理
let IMG = document.getElementById('IMG');
IMG.addEventListener('error',function(e){e.target.str = 'xxx/xxx.png'; // 为当前图片设定默认图
})
这种方式,确实实现了对异常图片的降级处理,但每张图片都需要通过 JS 进行获取,并且监听 error 事件,对于大量图片的情况并不适用
为此,我们可以使用内联事件来监听 error 事件
2.内联事件
<img src="//xxx.xxx.xxx/img.png" onerror="this.src = 'xxx/xxx.png'">
但这种方式还不够好,因为我们仍然需要手动的向 img 标签中添加内联事件,在实际开发过程中,很难保证每张图片都不漏写
那么我们思考,是否可以不写内联事件,通过在全局监听的方式,来对异常图片做降级处理呢
3.全局监听
我们希望的是,能够在全局监听 error 事件,在实际实现之前,先来看一下浏览器中的事件流
DOM2级事件规定事件流包含三个阶段:
- 事件捕获阶段
- 处于目标阶段
- 事件冒泡阶段
首先发生的是事件捕获,为截获事件提供了机会。然后是实际的目标接收到的事件。最后一个阶段是冒泡阶段。
我们上文中的监听图片自身的 error 事件,实际上在事件流中是处于目标阶段。
对于 img 的 error 事件来说,是无法冒泡的,但是是可以捕获的,我们的实现如下,直接接给window绑定一个错误的事件,然后通过判断这个事件,是不是图片错误事件,是的话,把他的src改为默认图片
window.addEventListener('error',function(e){// 当前异常是由图片加载异常引起的if( e.target.tagName.toUpperCase() === 'IMG' ){e.target.src = '//xxx.xxx.xxx/default.jpg';}
},true)
本文借鉴于GitHub,作者 云中桥
图片加载失败时,显示默认图片相关推荐
- vue本地项目配置图片加载失败_vue图片加载失败时用默认图片替换的方法
vue图片加载失败时用默认图片替换的方法 前言 本文主要给大家介绍的关于vue实现图片加载失败时用默认图片替换的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧 方法如下 原理 ...
- 图片加载失败后显示默认图片
加载失败后显示默认图: <img :src="`${img}.png`" onerror="javascript:this.src='logo.png'" ...
- Glide4 加载失败时显示默认图片
// 根据URL的首字母创建一个DRAWABLE TextDrawable drawable = TextDrawable.builder().buildRoundRect(getUrlFirstLe ...
- js中图片加载失败,显示默认图片
js处理img标签加载图片失败,显示默认图片 1.第一种方法: 如果已经引入了jquery插件,就很好办.没有的话,如果实在需要,可以附上代码: $('img').error(function(){$ ...
- HTML img图片加载失败时用默认图片替换
原文地址:http://blog.csdn.net/qq_24771775/article/details/50294931 img元素加载图片失败,则变成一个小图标,让页面变得难看.此时如何替换为默 ...
- img 图片加载错误时显示默认图片
有时我们项目里的图片加载错误时(比如 404),为了友好体验,我们可以用一张默认图片来替代. 方法一:用 background 遮住原图片 <img src="no-such-pic. ...
- 图片加载失败时展示默认图片
HTML: <img src='${defalutImg}' data-src="${fileDomain }/images/${poi.firstPic}" width=& ...
- img图片加载错误时显示默认图片
JavaScript用的onerror事件,vue用的@error JavaScript写法 <img src="xxx" onerror="this.src='d ...
- ionic 图片加载失败,显示默认图片代替
1.首先编写自定义指令 angular.module('starter.directives', []) //当图片找不到事显示替代图片.directive("errSrc", f ...
最新文章
- Win7安装Docker
- Android基础夯实--你了解Handler有多少?
- 通过字符串引入模块下的属性
- 详解NLP技术中的:预训练模型、图神经网络、模型压缩、知识图谱
- Lineageos14 20180525更新
- Java案例:静态内部类
- 团体程序设计天梯赛-练习集-L1-036. A乘以B
- mysql长连接_mysql.connector 数据库长连接
- linux从哪里入侵电脑,linux入侵的基本命令网站安全 -电脑资料
- 在几何画板中如何制作圆柱的侧面展开动画_几何画板制作圆柱展开图过程详解...
- js生成带log的二维码(qrcodejs)
- Java程序员 面试如何介绍项目经验?
- php.exe不是 32位有效应用程序,XP系统打开程序时提示“不是有效的Win32应用程序”怎么办?...
- 【MATLAB】MATLAB 可视化之极坐标图
- 用python读取txt文件中的数据并画各类图形展示_Python实现读取txt文件中的数据并绘制出图形操作示例...
- 敏俊物联MJIOT-AMB-03 RTL8710BN 高性能wifi模块
- 《zw版·delphi与halcon系列原创教程》zw版_THImagex控件函数列表
- 在接下来的几周,Mt.gox可能会上演一出好戏
- BTC 固定的货币政策,真的无懈可击吗?
- 分享郑州买房后转LPR贷款利率带来的效益