如果图片加载失败，如何做统一处理及优化？

项目中遇到的问题

在实际项目中，不可避免的会遇到在页面中加载大量图片，但可能由于网络问题，或者图片文件缺失等问题，导致图片不能正常展示。

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

如何解决

监听图片的 error 事件

由于图片加载失败后，会抛出一个 error 事件，我们可以通过监听 error 事件的方式来对图片进行降级处理。

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

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

为此，我们可以使用内联事件来监听 error 事件

我们可以看到，完全不需要单独去写 JS 的监听，我们就实现了异常图片的降级处理，但这种方式还不够好，因为我们仍然需要手动的向 img 标签中添加内联事件，在实际开发过程中，很难保证每张图片都不漏写。

优化方案

通过在全局监听的方式，来对异常图片做降级处理

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

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

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

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

对于 img 的 error 事件来说，是无法冒泡的，但是是可以捕获的，我们的实现如下:

window.addEventListener('error',function(e){
    // 当前异常是由图片加载异常引起的
    if( e.target.tagName.toUpperCase() === 'IMG' ){
        e.target.src = '//xxx/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,/9j/4AAQSkZJRgABAQEAYABgAAD//AK3/ALYH+5hX6FV5N4Y/5GHwx/vyf+iJa9ZrysPhoYVShDZu/potDmwWFhhIzhT2bv6aLQ//Z';
        }else{
            target.dataset.count = count + 1;
            target.src = '//xxx/default.jpg';
        }
    }
},true)

---

经典前端面试题每日更新，欢迎参与讨论，地址：https://github.com/daily-interview/fe-interview。

---

更多angular1/2/4/5、ionic1/2/3、react、vue、微信小程序、nodejs等技术文章、视频教程和开源项目，请关注微信公众号——全栈弄潮儿。

qrcode_for_gh_8.jpg