解析vue-lazyload的设计思想

简介: 解析vue-lazyload的设计思想

vue-lazyload解决了什么问题?


可以想象一个网页打开有成百上千的图片需要加载,页面会变得非常的卡顿,此时如果只是可视区域的图片加载,其他的图片可以暂时有一个占位loading图,等滚动它们到可视区域时再去请求真实图片并且替换就好了。很好,vue-lazyload插件就是解决此类问题的,对vue插件的写法不熟悉的可以先看一下vue插件


vue-lazyload设计简析


解析之前可以先思考一下如果自己写一个图片懒加载的工具,会如何实现呢?首先最明显的是需要一个检查图片dom元素是否在浏览器可视区域内的方法checkInView,然后需要给所有图片的滚动父元素绑定一个滚动事件的监听方法scrollHandler,所以大概的思路图为:

image.png


image.png

其实上图就已经实现了一个最最基本的图片懒加载的思路了,稍加修饰就可以写出可运行的代码。

接下来带着这个基本思路来看vue-layload的实现.


src/index.js


image.png

可以看到提供了两种指令使用方式和两种组件使用方式,我主要分析v-lazy的指令在vue2版本的实现,其他的可以自行分析,原理相通。

可以看出来通过Lazy和LazyClass得到了lazy这个对象,v-lazy指令对应的几个回调函数:bind、update、componentUpdated和unbind分别绑定的是lazy对象的add、update、lazyLoadHandler和remove方法。

接下来看lazy对象是如何生成的:


src/lazy.js

image.png

可以看到lazy.js文件导出了一个方法,该方法又返回了一个Lazy类,这么写的

原因是为了形成闭包来继续在Lazy类中引用Vue。下面看Lazy类的构造函数:

image.png

可以看到构造函数里面初始化了一大堆的配置和变量,一个函数lazyLoadHandler以及setMode来判断是否使用observer来检测dom可见(IntersectionObserver


顺着刚刚src/index.js的思路继续往下看指令bind回调函数发生了什么:

src/lazy.js

image.png

image.png

可以看到对于每个添加了v-lazy指令的dom元素,都会先找到它的scrollParent元素(其实就是一直向上遍历到它overflow=auto或scroll的祖先元素);然后会生成一个newListener对象,并且把newListener加到ListenerQueue数组中;最后调用_addListenerTarget方法。

接着看_addListenerTarget方法发生了什么:


src/lazy.js

image.png

可以看到将scrollParent元素放入了TargetQueue,并且调用了_initListen方法


继续看_initListen方法:

src/lazy.js

image.png

可以看到给scrollParent监听了this.options.ListenEvents里面的所有事件,事件回调函数为lazyLoadHandler。

在前面已经说过了lazyLoadHandler的初始化:


src/lazy.js

image.png

lazyLoadHandler方法就是_lazyLoadHandler加了一个节流包装后返回的函数。

继续看_lazyLoadHandler的实现:

src/lazy.js

image.png

可以看到_lazyLoadHandler方法里是遍历了ListenerQueue数组,并且调用每个listener的checkInView,如果checkInView返回true则调用listener.load;此时其实可以猜到checkInView是在检查该listener对应的dom元素是否在可视区域内,listener.load方法是在请求真正的image。

所以梳理一下,vue-lazyload的简要设计思想可以如图所示



image.pngimage.pngimage.png

image.png

相关文章
|
8月前
|
机器学习/深度学习 计算机视觉 知识图谱
YOLOv11改进策略【注意力机制篇】| SENet V2 优化SE注意力机制,聚合通道和全局信息
YOLOv11改进策略【注意力机制篇】| SENet V2 优化SE注意力机制,聚合通道和全局信息
259 1
YOLOv11改进策略【注意力机制篇】| SENet V2 优化SE注意力机制,聚合通道和全局信息
|
11月前
|
前端开发 JavaScript 搜索推荐
前端懒加载:提升页面性能的关键技术
前端懒加载是一种优化网页加载速度的技术,通过延迟加载非首屏内容,减少初始加载时间,提高用户访问体验和页面性能。
|
存储 人工智能 数据库
深度解读RAG技术发展历程:从基础Naive RAG 到高级Advanced,再到模块化Modular RAG的全面升级
【8月更文挑战第11天】深度解读RAG技术发展历程:从基础Naive RAG 到高级Advanced,再到模块化Modular RAG的全面升级
深度解读RAG技术发展历程:从基础Naive RAG 到高级Advanced,再到模块化Modular RAG的全面升级
|
机器学习/深度学习 人工智能 安全
云上智能风控:重塑金融安全的智能屏障
灵活性:系统具备良好的灵活性和可扩展性,能够根据业务需求进行功能扩展和升级。 成本节约:通过自动化和智能化的方式降低人工成本,提高风控效率的同时减少不必要的开支。 4.2 未来展望 随着技术的不断进步和市场的不断发展,云上智能风控将迎来更加广阔的发展前景。未来,云上智能风控系统将进一步优化算法模型和技术架构,提高风险识别的准确性和效率;
553 7
|
数据采集 存储 运维
物联网设备的数据处理与分析技术探讨
【7月更文挑战第2天】探索物联网(IoT)数据处理技术,涵盖数据采集(传感器、无线通信)、存储(分布式系统、NoSQL)、处理(清洗、压缩、转换)和分析(描述性、聚类、分类、异常检测)。未来趋势涉及AI集成、边缘计算、多模态处理和系统自主化。随着技术演进,期待更智能、高效的解决方案。
|
前端开发
如何处理Uniapp中的异步请求?
如何处理Uniapp中的异步请求?
684 0
|
Linux Nacos
913.【Nacos】linux 安装nacos
913.【Nacos】linux 安装nacos
494 2
|
存储 负载均衡 监控
【Elasticsearch专栏 08】深入探索:Elasticsearch中的Routing机制详解
Elasticsearch中的Routing机制允许用户根据自定义规则决定文档存储在哪个分片上。通过指定路由值,可以控制相关文档被路由到同一分片,优化查询性能和数据一致性。但需注意路由一致性和负载均衡问题。
379 0
|
前端开发 安全 JavaScript
前端安全防护:XSS、CSRF攻防策略与实战
【4月更文挑战第13天】本文探讨了XSS和CSRF攻击的类型、危害及防御方法。XSS攻击通过注入恶意脚本威胁用户安全,分为存储型、反射型和DOM型。CSRF攻击利用用户已登录状态发起恶意请求,可能导致账户状态改变和数据泄露。防御XSS包括输入验证、输出编码和启用Content Security Policy(CSP)。针对CSRF,可使用Anti-CSRF Tokens、设置SameSite Cookie属性和启用HTTPS。开发者应采取这些策略保护用户数据和网站稳定性。
1674 0
|
机器学习/深度学习 编解码 算法
YOLO 施工安全帽目标检测模型
建筑工地的工人安全是许多建筑行业日益关注的问题。佩戴安全帽可以减少建筑工地工人的伤害,但由于各种原因,安全帽并不总是正确佩戴。因此,基于计算机视觉的自动安全帽检测系统极为重要。许多研究人员已经开发了基于机器和深度学习的头盔检测系统,但很少有人专注于建筑工地的头盔检测。
392 0