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

你可能感兴趣的:(js前端图片加载异常兜底方案)