原地址: https://juejin.im/post/5d3e4304f265da1b8608cee5
个人觉得很有用处 所以记录在自己的博客里 留有后用
JS监听图片的 error 事件
<img id="img" src="//xxx.xxx.xxx/img.png">
let img = document.getElementById('img');
img.addEventListener('error',function(e){
e.target.src = '//xxx.xxx.xxx/default.png'; // 为当前图片设定默认图
})
这样不利于处理大量图片的情况
内联方式监听图片的 error 事件
<img src="//xxx.xxx.xxx/img.png" onerror="this.src = '//xxx.xxx.xxx/default.png'">
通过全局监听 error 事件
window.addEventListener('error',function(e){
// 当前异常是由图片加载异常引起的
if( e.target.tagName.toUpperCase() === 'IMG' ){
e.target.src = '//xxx.xxx.xxx/default.jpg';
}
},true)
当网络环境很差的时候 可以设置一个计数器 当达到期望次数 改为提供一个Base64的图片
window.addEventListener('error',function(e){
let target = e.target, // 当前dom节点
tagName = target.tagName,
times = Number(target.dataset.times) || 0, // 以失败的次数，默认为0
allTimes = 3; // 总失败次数，此时设定为3
// 当前异常是由图片加载异常引起的
if( tagName.toUpperCase() === 'IMG' ){
if(times >= allTimes){
target.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
}else{
target.dataset.times = times + 1;
target.src = '//xxx.xxx.xxx/default.jpg';
}
}
},true)
