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

查看所有标签

猜你喜欢:

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

密码学概论(中文版)

密码学概论(中文版)

wade trappe、lawrence C.washington / 特拉普 / 人民邮电出版社 / 2004-6-1 / 38.00

本书全面讲解了密码学基本知识以及相关的基础数学理论,介绍了椭圆曲线、AES和量子密码体制等密码学前沿知识,详细地阐述了数字签名、数字现金等应用问题。另外,书中每章均给出了相应的习题,在附录中给出了相关Mathematica、Maple和 MATLAB实例。 本书可供高等院校就用数学、通信和计算机等专业用作密码学、通信安全和网络安全等课程的教材或参考书,也可供信息安全系统设计开发人......一起来看看 《密码学概论(中文版)》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

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

UNIX 时间戳转换