简介
justlazy 是一款针对于延迟加载的 JavaScript 库，可以有效提高网页的响应速度和性能。它能够自动延迟加载图片和视频等资源，优化了网页的加载效率和用户体验。
安装
使用 npm 安装 justlazy：
npm install justlazy --save-dev
也可以通过链接引入：
<script src="https://unpkg.com/justlazy"></script>
使用方法
使用 justlazy 非常简单，只需在需要延迟加载的图片和视频标签添加 lazy 属性即可：
<img src="default.png" data-src="image.png" alt="lazy image" lazy> <video src="video.mp4" data-src="video.webm" controls preload="none" lazy></video>
其中 src 属性表示默认图片/视频，data-src 表示真实的图片/视频路径。添加 lazy 属性后，justlazy 会自动处理。
配置项
justlazy 提供了一些配置项，可供定制化和优化。
offset
默认值： 0
表示图片/视频距离浏览器底部 offset 像素时开始加载。一般情况下不需要修改此配置项。
throttle
默认值：200
表示初始化和浏览器滚动事件之间的时间差，单位是毫秒。此值越小，网页滑动的越流畅。
debounce
默认值：300
表示加载图片/视频后的时间差，单位是毫秒。此值越小，在图片/视频没有加载完成的情况下网页滑动的越流畅。
placeholderImage
默认值：data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=
表示使用的占位符图片，当图片/视频没有加载完成时使用。建议使用小尺寸的占位符图片，可以提高加载效率。
removeClass
默认值：false
表示当加载完成后是否从标签中移除 lazy 属性。若设置为 true，可以有效减小 DOM 的大小，提升性能。
callback
默认值：null
表示加载完成后的回调函数，一般用于埋点和其他自定义操作。
示例代码
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------------- ---------------
-------
------
------------ ------------
---- ----------------- -------------------- --------- ------ -----
------ --------------- --------------------- -------- -------------- -------------
------- ------------------------------------------
--------
--- ----------
------- ----
--------- ----
--------- ----
----------------- -------------------------------------------------------------
------------ -----
--------- ------------ -
------------------ -------- --------
-
---
---------
-------
-------总结
justlazy 是一款非常实用的 JavaScript 库，它可以有效地提高网页的加载速度和性能，非常适用于移动端网页开发。通过学习和使用 justlazy，可以让我们更好地掌握前端开发中的延迟加载技术，为我们的网站和用户带来更好的体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066ef84c49986ca68d86ca