html网页图片加载失败的友好处理方式

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

 

方法一：在img标签上使用内联事件处理图片加载失败的情况，引入图片数量少的话可以这么做，网页内图片较多的时候不推荐。（default.png是图片加载错误时替换的图片资源，可以自行修改路径和文件名。）

<img src='xxxxx' onerror="this.src = 'default.png'">

 

方法二：为所有img标签统一添加error处理事件，在捕获阶段截获并触发函数，从而减少性能损耗。

document.addEventListener(
    'error',
    e => {
        let target = e.target
        const tagName = target.tagName || ''
        if (tagName.toLowerCase = 'img') {
            target.src = 'default.png'
        }
        target = null
    },
    true
)

 

方法三：为每个img标签额外添加一个data-retry-times计数属性，当重试超过限制次数后就用base64图片作为替代。

document.addEventListener(
    'error',
    e => {
        let target = e.target
        const tagName = target.tagName || ''
        const curTimes = Number(target.dataset.retryTimes) || 0
        if (tagName.toLowerCase() === 'img') {
            if (curTimes >= 3) {
                target.src = 'data:image/png;base64,xxxxxx'
            } else {
                target.dataset.retryTimes = curTimes + 1
                target.src = target.src
            }
        }
        target = null
    },
    true
)