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

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

方法一：在img标签上使用内联事件处理图片加载失败的情况，引入图片数量少的话可以这么做，网页内图片较多的时候不推荐。（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
)

巴特西

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

最新文章

热门文章