npm 包 lazyload 使用教程-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，图片懒加载（lazy load）是一种常见的优化技术。它可以延迟图片的加载时间，只有当图片进入浏览器可视区域时才进行加载，从而减少页面加载时间，提高用户体验。然而，实现图片懒加载并不是一件容易的事情，需要编写复杂的 JavaScript 代码。为了简化这个过程，我们可以使用 npm 包 lazyload。

安装和引用

要使用 lazyload，首先需要安装它。你可以使用 npm 或者 yarn 进行安装：

npm install lazyload

或者

yarn add lazyload

安装完成后，你可以在你的 JavaScript 代码中引入它：

import LazyLoad from 'lazyload';

基本用法

lazyload 的基本用法非常简单。你只需要在 HTML 中给需要懒加载的图片添加一个 data-src 属性，将图片的真实地址设置为该属性值，然后在 JavaScript 中创建一个 LazyLoad 实例即可：

<img data-src="images/picture.jpg" alt="Picture">

const lazyLoadInstance = new LazyLoad();

这样，在页面滚动到图片所在位置时，图片就会自动加载。如果需要对 LazyLoad 实例进行配置，可以传递一个配置对象作为参数：

const lazyLoadInstance = new LazyLoad({
  elements_selector: '.lazy',
  threshold: 0,
});

在上面的配置中，elements_selector 参数指定了需要懒加载的图片的 CSS 选择器，threshold 参数表示当图片距离视口边缘的距离小于等于 0 时就进行加载。更多配置项可以查看 lazyload 的文档。

进阶用法

除了基本用法之外，lazyload 还提供了一些进阶用法，以满足更复杂的需求。下面介绍两种常见的进阶用法。

图片渐进加载

图片渐进加载是指在图片加载过程中逐渐显示出来，而不是等到图片完全加载完成再显示。这种方式可以提高用户体验，让用户感觉页面加载速度更快。

要实现图片渐进加载，你需要在 HTML 中先为每个需要懒加载的图片添加一个占位符。占位符可以是一个背景色或者一张像素图：

<img data-src="images/picture.jpg" alt="Picture"
     src="images/placeholder.png">

然后，在 JavaScript 中创建 LazyLoad 实例时，将 data-sizes 属性设置为 "auto"，将 data-bgset 属性设置为图片各个分辨率对应的 URL，使用英文逗号分隔：

const lazyLoadInstance = new LazyLoad({
  data_sizes: 'auto',
  data_bgset: 'images/picture-400.jpg 400w, images/picture-800.jpg 800w, images/picture-1200.jpg 1200w',
});

这样，lazyload 就会自动将 data-src 属性的图片替换成占位符，然后使用 CSS 技术实现图片渐进加载效果。

懒加载背景图

除了懒加载图片之外，有时候我们还需要懒加载背景图。这种情况下，我们可以在 HTML 中使用 div 元素来代替 img 元素，并将 data-bg 属性设置为背景图的 URL：

<div class="lazy" data-bg="images/background.jpg"></div>

然后，在 JavaScript 中创建 LazyLoad 实例时，将 elements_selector 参数设置为 `.

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/35111