在前端开发中，图片懒加载（lazy load）是一种常见的优化技术。它可以延迟图片的加载时间，只有当图片进入浏览器可视区域时才进行加载，从而减少页面加载时间，提高用户体验。然而，实现图片懒加载并不是一件容易的事情，需要编写复杂的 JavaScript 代码。为了简化这个过程，我们可以使用 npm 包 lazyload。
安装和引用
要使用 lazyload，首先需要安装它。你可以使用 npm 或者 yarn 进行安装：
--- ------- --------
或者
---- --- --------
安装完成后，你可以在你的 JavaScript 代码中引入它：
------ -------- ---- -----------
基本用法
lazyload 的基本用法非常简单。你只需要在 HTML 中给需要懒加载的图片添加一个 data-src 属性，将图片的真实地址设置为该属性值，然后在 JavaScript 中创建一个 LazyLoad 实例即可：
---- ----------------------------- --------------
----- ---------------- - --- -----------
这样，在页面滚动到图片所在位置时，图片就会自动加载。如果需要对 LazyLoad 实例进行配置，可以传递一个配置对象作为参数：
----- ---------------- - --- ---------- ------------------ -------- ---------- -- ---
在上面的配置中，elements_selector 参数指定了需要懒加载的图片的 CSS 选择器，threshold 参数表示当图片距离视口边缘的距离小于等于 0 时就进行加载。更多配置项可以查看 lazyload 的文档。
进阶用法
除了基本用法之外，lazyload 还提供了一些进阶用法，以满足更复杂的需求。下面介绍两种常见的进阶用法。
图片渐进加载
图片渐进加载是指在图片加载过程中逐渐显示出来，而不是等到图片完全加载完成再显示。这种方式可以提高用户体验，让用户感觉页面加载速度更快。
要实现图片渐进加载，你需要在 HTML 中先为每个需要懒加载的图片添加一个占位符。占位符可以是一个背景色或者一张像素图：
---- ----------------------------- -------------
-----------------------------然后，在 JavaScript 中创建 LazyLoad 实例时，将 data-sizes 属性设置为 "auto"，将 data-bgset 属性设置为图片各个分辨率对应的 URL，使用英文逗号分隔：
----- ---------------- - --- ---------- ----------- ------- ----------- ----------------------- ----- ---------------------- ----- ----------------------- ------- ---
这样，lazyload 就会自动将 data-src 属性的图片替换成占位符，然后使用 CSS 技术实现图片渐进加载效果。
懒加载背景图
除了懒加载图片之外，有时候我们还需要懒加载背景图。这种情况下，我们可以在 HTML 中使用 div 元素来代替 img 元素，并将 data-bg 属性设置为背景图的 URL：
---- ------------ --------------------------------------
然后，在 JavaScript 中创建 LazyLoad 实例时，将 elements_selector 参数设置为 `.
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/35111