【视频教程】-图片加载失败模块设计-冰山工作室-沙翼-web前端

栏目: JavaScript · 发布时间: 5年前

内容简介:看到这个问题,我们应该先想一下通常是如何处理图片加载失败的如果图片加载失败时会触发 error 事件,那么就容易了,只要为每个 img 标签添加上内联事件 onerror 就可以了

视频地址,或在bilibili,腾讯视频搜索【冰山工作室】

看到这个问题,我们应该先想一下通常是如何处理图片加载失败的

如果图片加载失败时会触发 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前端


以上所述就是小编给大家介绍的《【视频教程】-图片加载失败模块设计-冰山工作室-沙翼-web前端》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

百面机器学习

百面机器学习

诸葛越、葫芦娃 / 人民邮电出版社 / 2018-8-1 / 89.00元

人工智能领域正在以超乎人们想象的速度发展,本书赶在人工智能彻底占领世界之前完成编写,实属万幸。 书中收录了超过100道机器学习算法工程师的面试题目和解答,其中大部分源于Hulu算法研究岗位的真实场景。本书从日常工作、生活中各种有趣的现象出发,不仅囊括了机器学习的基本知识 ,而且还包含了成为出众算法工程师的相关技能,更重要的是凝聚了笔者对人工智能领域的一颗热忱之心,旨在培养读者发现问题、解决问......一起来看看 《百面机器学习》 这本书的介绍吧!

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具