图片加载失败的前端解决方案

更新日期: 2022-01-06阅读量: 206标签: 图片

在实际项目中,不可避免的会遇到在页面中加载大量图片,但可能由于网络问题,或者图片文件缺失等问题,导致图片不能正常展示,并且在不同浏览器处理错误图片是不一样的,有的干脆就显示差号,例如IE,有的显示一张破碎的图片,有的则是给一张高度比较大的默认图,例如PC端的火狐,IOS中Safari,还有安卓中的UC浏览器。这样在手机中就会导致左右两侧图片高度不一致!

我们希望有一种降级处理的方式,可以在图片加载失败后显示一张我们预先设定好的默认图片。


解决方案

由于图片加载失败后,会抛出一个 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>


站长推荐

1.云服务推荐: 国内主流云服务商/虚拟空间,各类云产品的最新活动,优惠券领取。领取地址:阿里云腾讯云硅云

链接: https://www.fly63.com/article/detial/11011

原生Js对文件类型的判断,判断文件是图片,视频等格式

在我们开发中,会遇到这样的场景:1.服务器返回Json数据,根据数据类型来显示是图片还是视频。2.前端上传文件,需要指定文件类型才能上传到服务器。这时候就需要使用Js来判断对应文件的类型

前端图片懒加载的实现,采用Lazy Load 图片延迟加载提高用户体验

对于图片过多的页面,为了加速页面加载速度,所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载, 等到滚动到可视区域后再去加载。这样子对于页面加载性能上会有很大的提升,也提高了用户体验。

web前端图片加载优化,从图片模糊到清晰的实现过程

在网页图片显示的时候,会发现许多网站采用了先模糊,然后在慢慢清晰的过程,这样的加载用户体验是比较好的,那么如何实现呐?默认加载2张图片,一张缩略图,一张原图,当打开网页的时候默认只显示缩略图

lazysizes.js使用方法_实现图片懒加载、延迟加载的js插件

当你的网站使用了大量图片时候,如果一次性全部加载,那么会严重影响网站的速度。通过lazysizes.js插件就能很好解决这个问题,它可以实现图片的延迟加载【懒加载】

js实现图片局部放大效果

图片局部放大效果结合的知识点主要是DOM的操作,以及事件的应用,所以首先要对DOM的操作有一定了解,其次能对事件的应用有一定的累积。

网站图片优化的重要性与技巧方案

网站图片优化技巧:1、图片名包括关键词,2、Alt标签包括关键词,3、图片周边文本包括关键词,4、GLF和JPGE图画优化,5、在图片链接中运用锚文本关键字

css实现不定宽高的图片img居中裁剪_类似微信朋友圈图片效果

前端需要显示矩形的缩略图,接口返回的图片尺寸大小不一,宽高不相等,需要前端来处理并显示成正方形,类似微信朋友圈图片的效果。那么使用纯css该如何实现不定宽高的图片居中裁剪呢?

css多个img标签存在间隙的解决方法总汇

在网上整理了一些解决多个img标签存在间隙的方法:多个img标签写在一行、将要闭合标签的地方与开始标签的地方重合、在img标签的父级上写:font-size:0;这个在解决display:inline-block出现的问题也有帮助、使用display:block(img是内联元素)要float一下才行

原生js 生成海报图_利用canvas合成图片的实现方法

目前浏览器对html5的支持越来越好,我们现在不用服务器端,直接在前端利用canvas就可以进行图片的合成了。下面就介绍下如何通过原生js 来生成海报图

网页中默认图片的几种解决方式

现在网页中图片随处可见,但避免不了有时会出现图片资源失败的情况,这里的alt属性是为了当图片加载失败时告诉用户图片信息的 ,能不能美化一下呢?下面给出几种方式

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!