img 图片异常处理

原地址:  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)