图片加载失败的前端解决方案-技术圈

来源 | www.fly63.com

在实际项目中，不可避免的会遇到在页面中加载大量图片，但可能由于网络问题，或者图片文件缺失等问题，导致图片不能正常展示，并且在不同浏览器处理错误图片是不一样的，有的干脆就显示差号，例如IE，有的显示一张破碎的图片，有的则是给一张高度比较大的默认图，例如PC端的火狐，IOS中Safari,还有安卓中的UC浏览器。这样在手机中就会导致左右两侧图片高度不一致！我们希望有一种降级处理的方式，可以在图片加载失败后显示一张我们预先设定好的默认图片。

解决方案

由于图片加载失败后，会抛出一个 error 事件，所以我们只需要判断当图片加载失败的时候给一个默认图就可以了，不让浏览器使用其自带的默认图。比如：

<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>

学习更多技能

请点击下方公众号