js前端图片加载异常兜底方案

背景

网络环境总是多样且复杂的，一张图片可能会因为网路状况差而加载失败或加载超长时间，也可能因为权限不足或者资源不存在而加载失败，这些都会导致用户体验变差，所以我们需要一个图片加载异常的兜底方案。

加载错误解决方案

内联事件

直接在img标签上使用内联事件处理图片加载失败的情况，但是这种方式代码侵入性太大，指不定就会有地方漏掉。

全局img添加事件

第一个方案侵入性太大，我们将入口收敛，为所有img标签统一添加error处理事件。

const imgs = document.getElementsByTagName('img')
Array.prototype.forEach.call(imgs, img => {
    img.addEventListener('error', e => {
        e.target.src = 'default.png'
    })
})

利用error事件捕获

为每个img添加事件处理函数的代价还是高了点，我们知道一般事件会经历三个阶段：

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

根据MDN文档中的描述：

When a resource (such as an or