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

目录

• 背景
• 加载错误解决方案
• 内联事件
• 全局img添加事件
• 利用error事件捕获
• 替换src方式的最优解
• CSS处理的最优解
• 加载超时解决方案
• 嗅探切换Domain(CNAME)
• 服务端下发Domain(CNAME)
• background-image加载异常解决方案
• 自定义事件
• 嗅探加载情况
• 添加事件捕获

背景

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

加载错误解决方案

内联事件

直接在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