图片加载失败的前端解决方案
web前端开发
共 1865字,需浏览 4分钟
· 2022-01-06
来源 | www.fly63.com
解决方案
由于图片加载失败后,会抛出一个 error 事件,所以我们只需要判断当图片加载失败的时候给一个默认图就可以了,不让浏览器使用其自带的默认图。比如:<img src="//fly63.com/img.png" onerror="this.src = '//fly63.com/default.png'">
但是这样呢也会存在一些问题,比如:
1.我们需要手动的向 img 标签中添加内联事件,在实际开发过程中,很难保证每张图片都不漏写。
2.因为图片加载失败进入默认图,那么默认图再加载失败怎么办呢?
优化方案一:
我们可以通过在全局监听的方式,来对异常图片做降级处理,这样不用在每个img标签中不用onerror事件。
监听图片自身的 error 事件,实际上在事件流中是处于目标阶段。对于 img 的 error 事件来说,是无法冒泡的,但是是可以捕获的,我们的实现如下:
window.addEventListener('error',function(e){
//当前异常是由图片加载异常引起的
if( e.target.tagName.toUpperCase() === 'IMG' ){
e.target.src = '//fly63.com/default.jpg';
}
},true)
最后,我们在思考一个问题,当网络出现异常的时候,必然会出现什么网络图片都无法加载的情况,这样就会导致我们监听的 error 事件。
被无限触发,所以我们可以设定一个计数器,当达到期望的错误次数时停止对图片赋予默认图片的操作,改为提供一个Base64的图片。
实现起来也很简单,如下:
window.addEventListener('error',function(e){
let target = e.target, // 当前dom节点
tagName = target.tagName,
count = Number(target.dataset.count ) || 0, // 以失败的次数,默认为0
max= 3; // 总失败次数,此时设定为3
// 当前异常是由图片加载异常引起的
if( tagName.toUpperCase() === 'IMG' ){
if(count >= max){
target.src = 'data:image/jpeg;base64*******';//base64图片字符串
}else{
target.dataset.count = count + 1;
target.src = '//xxx/default.jpg';
}
}
},true)
优化方案二:
如果我们不需要全局监听error事件,仍然想用onerror事件,如何保证不进入死循环呢?代码如下:
<img src="//fly63.com/img.png" onerror="nofind()"/>
<script type="text/JavaScript">
function nofind(){
var img=event.srcElement || event.target ; //获取img对象,火狐是event.target ,IE及谷歌其他是event.srcElement
img.src="//fly63.com/default.png";
img.onerror=null;
}
</script>
学习更多技能
请点击下方公众号
评论
富春镇富春村
2022年10月,2022年淘宝村名单发布,富春村上榜。2021年10月,南京大学空间规划研究中心、阿里研究院联合发布2021年淘宝村名单,富春村榜上有名。2019年12月,富春村被授予2019年度山
富春镇富春村
0
富春镇北富春村
北富春村是山东省菏泽市鄄城县富春镇下辖的行政村,城乡分类代码为122,为镇乡结合区。区划代码为371726207204,居民身份证号码前6位为371726。邮政编码为274000,长途电话区号为053
富春镇北富春村
0