【视频教程】-图片加载失败模块设计-冰山工作室-沙翼-web前端
栏目: JavaScript · 发布时间: 5年前
内容简介:看到这个问题,我们应该先想一下通常是如何处理图片加载失败的如果图片加载失败时会触发 error 事件,那么就容易了,只要为每个 img 标签添加上内联事件 onerror 就可以了
看到这个问题,我们应该先想一下通常是如何处理图片加载失败的
如果图片加载失败时会触发 error 事件,那么就容易了,只要为每个 img 标签添加上内联事件 onerror 就可以了
<img src="aaa.jpg" onerror="this.src='placeholder.jpg'">
但是不是还可以优化一下呢
<img src="aaa.jpg" onerror="errorHandler(this, event)"> <script> window.errorHandler = function(target, event){ target.src = 'placeholder.jpg'; } </script>
这似乎已经满足题目的要求,但是真的没有可优化的地方了么?
- 首先,这个做法的先决条件是要求每个 img 标签上都要求写上 onerror 内联事件,其它开发人员忘了写怎么办?
- 其次,在全局暴露了一个全局函数
以上两点在一些严格执行编码规范的团队中是不能接受的
那么有什么办法呢?
因为 error 事件无法冒泡,但是事件传播只有冒泡一种方式么,还有捕获
查规范可知, error 事件是可以捕获的,那么就可以实现如下代码
function imgErrorHandler(){ window.addEventListener('error', function(e){ if( e.target.tagName === 'IMG' ){ e.target.src = 'placeholder.jpg'; } }, true); }
这样就可以不用担心有人在 img 标签上漏写 onerror 内联事件了,因为根本不需要写了,也不会再暴露全局函数,只需要在页面渲染的过程中执行一下上面的函数就可以了
接下来可以扩展一下功能:
必然存在不同的场景下图片加载失败显示不同的占位图的需求,那么我们可以在 img 标签上添加一个 data-placeholder 属性,标明一下当前场景想要显示的占位图是什么
当完全断网的时候,必然什么图片都无法加载,必然导致错误处理被无限触发,可以标记一个计数器,当达到期望的数值时停止继续请求,改为提供一个 Base64 的图片路径
这样代码就扩展如下:
const PLACE_HOLDER_IMG_LIST = { default: 'placeholder.jpg' , offline: 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' , avatar: 'userAvatar.jpg' , photo: 'photo.jpg' } ; function imgErrorHandler(){ window.addEventListener('error', function(e){ let {target} = e , {placeholder = 'default', timer = 0} = target.dataset ; if( target.tagName === 'IMG' ){ timer = parseInt( timer ); if( timer < 3 ){ target.src = PLACE_HODLDER_IMG_LIST[placeholder]; target.dataset.timer = timer +1; } else{ target.src = PLACE_HOLDER_IMG_LIST.offline; } } }, true); }
扩展阅读
根据规范:Once the propagation path has been determined, the event object passes through one or more event phases. 一旦确定了传播路径,事件对象就会通过一个或多个事件阶段。即每个事件都会有捕获阶段,但不一定会有冒泡阶段。比如 focus、blur 事件都是不冒泡的,但是却是可以被捕获的.随着 IE 浏览器逐渐退出历史舞台,传统的以事件冒泡的开发方式也许会发生改变.尤其在移动端,一些 touch 事件库已经使用捕获的方式来执行.捕获阶段一定会在冒泡阶段之前,所以理论上能更快的响应
同时你也可以关注我们的微信公众号:冰山工作室
有兴趣的同学可以破解我们的二维码来加入社团: 二维码破解处?不服来战
以上所述就是小编给大家介绍的《【视频教程】-图片加载失败模块设计-冰山工作室-沙翼-web前端》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 业界首个?这仅仅是我们冰山一角
- AI的张良计与过墙梯:3·15智能骚扰电话下的冰山脉络
- TensorFlow系列专题(十四): 手把手带你搭建卷积神经网络实现冰山图像分类
- 前端科普系列(三):CommonJS 不是前端却革命了前端
- 前端科普系列(三):CommonJS 不是前端却革命了前端
- 前端技术演进(三):前端安全
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。