图片加载失败的前端解决方案

来源 | www.fly63.com

解决方案

<img src="//fly63.com/img.png" onerror="this.src = '//fly63.com/default.png'">

但是这样呢也会存在一些问题，比如：

1.我们需要手动的向 img 标签中添加内联事件，在实际开发过程中，很难保证每张图片都不漏写。
2.因为图片加载失败进入默认图，那么默认图再加载失败怎么办呢？

优化方案一：

我们可以通过在全局监听的方式，来对异常图片做降级处理，这样不用在每个img标签中不用onerror事件。

监听图片自身的 error 事件，实际上在事件流中是处于目标阶段。对于 img 的 error 事件来说，是无法冒泡的，但是是可以捕获的，我们的实现如下:

window.addEventListener('error',function(e){    //当前异常是由图片加载异常引起的    if( e.target.tagName.toUpperCase() === 'IMG' ){        e.target.src = '//fly63.com/default.jpg';    }},true)

最后，我们在思考一个问题，当网络出现异常的时候，必然会出现什么网络图片都无法加载的情况，这样就会导致我们监听的 error 事件。

被无限触发，所以我们可以设定一个计数器，当达到期望的错误次数时停止对图片赋予默认图片的操作，改为提供一个Base64的图片。

实现起来也很简单，如下：

window.addEventListener('error',function(e){    let target = e.target, // 当前dom节点        tagName = target.tagName,        count = Number(target.dataset.count ) || 0, // 以失败的次数，默认为0        max= 3; // 总失败次数，此时设定为3    // 当前异常是由图片加载异常引起的    if( tagName.toUpperCase() === 'IMG' ){        if(count >= max){            target.src = 'data:image/jpeg;base64*******';//base64图片字符串        }else{            target.dataset.count = count + 1;            target.src = '//xxx/default.jpg';        }    }},true)

优化方案二：

如果我们不需要全局监听error事件，仍然想用onerror事件，如何保证不进入死循环呢？代码如下：

<img src="//fly63.com/img.png" onerror="nofind()"/><script type="text/JavaScript">      function nofind(){          var img=event.srcElement || event.target ; //获取img对象，火狐是event.target ，IE及谷歌其他是event.srcElement         img.src="//fly63.com/default.png";         img.onerror=null;       }</script>

学习更多技能

请点击下方公众号