首页 文章详情

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

web前端开发 | 2254 2022-01-06 22:13 0 0 0
UniSMS (合一短信)

42a5669dc8919eea14eea60b33acde9f.webp

来源 | www.fly63.com

在实际项目中,不可避免的会遇到在页面中加载大量图片,但可能由于网络问题,或者图片文件缺失等问题,导致图片不能正常展示,并且在不同浏览器处理错误图片是不一样的,有的干脆就显示差号,例如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>


学习更多技能

请点击下方公众号

360bd8082ab0612ecef7f46662ff75f9.webp

c444fc6c5d06f5c4cae2822260562090.webp

8b1d9a60a54cb90f4472ccd356ff21ce.webp

good-icon 0
favorite-icon 0
收藏
回复数量: 0
    暂无评论~~
    Ctrl+Enter