「前端进阶」如何优雅的处理图片异常

引子

在咱们的实际工做中，不可避免的会在页面中加载大量图片，但可能因为网络问题，或者图片文件缺失等问题，致使图片不能正常展现

咱们但愿有一种降级处理的方式，能够在图片加载失败后显示一张咱们预先设定好的默认图片

监听图片的 error 事件

因为图片加载失败后，会抛出一个 error 事件，咱们能够经过监听 error 事件的方式来对图片进行降级处理

<img id="img" src="//xxx.xxx.xxx/img.png">
复制代码

let img = document.getElementById('img');
img.addEventListener('error',function(e){
    e.target.src = '//xxx.xxx.xxx/default.png'; // 为当前图片设定默认图
})
复制代码

这种方式，确实实现了对异常图片的降级处理，但每张图片都须要经过 JS 进行获取，而且监听 error 事件，对于大量图片的状况并不适用

为此，咱们能够使用内联事件来监听 error 事件

<img src="//xxx.xxx.xxx/img.png" onerror="this.src = '//xxx.xxx.xxx/default.png'">
复制代码

咱们能够看到，彻底不须要单独去写 JS 的监听，咱们就实现了异常图片的降级处理

但这种方式还不够好，由于咱们仍然须要手动的向 img 标签中添加内联事件，在实际开发过程当中，很难保证每张图片都不漏写

那么咱们思考，是否能够不写内联事件，经过在全局监听的方式，来对异常图片作降级处理呢

全局监听

咱们但愿的是，可以在全局监听 error 事件，在实际实现以前，先来看一下浏览器中的事件流

DOM2级事件规定事件流包含三个阶段：

• 事件捕获阶段
• 处于目标阶段
• 事件冒泡阶段

首先发生的是事件捕获，为截获事件提供了机会。而后是实际的目标接收到的事件。最后一个阶段是冒泡阶段。

咱们上文中的监听图片自身的 error 事件，实际上在事件流中是处于目标阶段。

对于 img 的 error 事件来讲，是没法冒泡的，可是是能够捕获的，咱们的实现以下:

window.addEventListener('error',function(e){
    // 当前异常是由图片加载异常引发的
    if( e.target.tagName.toUpperCase() === 'IMG' ){
        e.target.src = '//xxx.xxx.xxx/default.jpg';
    }
},true)
复制代码

最后，咱们在思考一个问题，当网络出现异常的时候，必然会出现什么网络图片都没法加载的状况，这样就会致使咱们监听的 error 事件 被无限触发，因此咱们能够设定一个计数器，当达到指望的错误次数时中止对图片赋予默认图片的操做，改成提供一个Base64的图片

实现起来也很简单，以下：

window.addEventListener('error',function(e){
    let target = e.target, // 当前dom节点
        tagName = target.tagName,
        times = Number(target.dataset.times) || 0, // 以失败的次数，默认为0
        allTimes = 3; // 总失败次数，此时设定为3
    // 当前异常是由图片加载异常引发的
    if( tagName.toUpperCase() === 'IMG' ){
        if(times >= allTimes){
            target.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
        }else{
            target.dataset.times = times + 1;
            target.src = '//xxx.xxx.xxx/default.jpg';
        }
    }
},true)
复制代码

写在最后

• 文中若有错误，欢迎在评论区指正，若是这篇文章帮到了你，欢迎点赞和关注
• 本文同步首发与github，可在github中找到更多精品文章，欢迎Watch & Star ★
• 后续文章参见：计划

欢迎关注微信公众号【前端小黑屋】，每周1-3篇精品优质文章推送，助你走上进阶之旅