在前端开发过程中，常常会遇到需要懒加载图片、组件等资源的需求。st-lazy 是一个优秀的 npm 包，它能够帮助我们实现非常高效的延迟加载。本文将详细介绍 st-lazy 的使用方法，并给出实用的示例代码。
st-lazy 是什么
st-lazy 是一个基于 requestAnimationFrame 的图片懒加载库。该库会监听滚动事件并计算出需要加载的图片，然后通过 requestAnimationFrame 来控制图片的加载时机，从而达到非常高效的效果。
安装和引入
在开始使用 st-lazy 之前，我们需要先通过 npm 安装它：
npm install st-lazy --save
然后在我们的项目中引入它：
import Lazy from 'st-lazy';
如果你的项目不支持 ES6 导入，可以通过其他方式引入：
// CommonJS
const Lazy = require('st-lazy');
// ES Modules
import * as Lazy from 'st-lazy';使用方法
在将我们的图片（或其他懒加载资源）添加到页面中之前，我们需要使用 st-lazy 的 add 方法将它们注册到 st-lazy 中。例如：
<img class="lazy" data-src="path/to/image.jpg" width="100" height="100" alt="Image" />
const lazy = new Lazy();
lazy.add('.lazy');上面的代码中，我们首先创建了一个新的 Lazy 实例，然后使用 add 方法将所有 .lazy 类名的元素注册到 Lazy 实例中。注意，我们使用了 data-src 属性来指定图片的真实路径，而 src 属性则设置为空白图像。这样做的好处是可以避免页面一开始就加载所有的图片。
一旦元素被注册到 Lazy 实例中，它们就会被监听滚动事件。当它们进入浏览器视口时，Lazy 会根据设定的 loadingClass 和 loadedClass 来给图片添加相应的类名，从而实现应有的效果。在默认的情况下，即将图片标记为正在加载时会加上 lazy-loading 类名，加载完毕会加上 lazy-loaded 类名。
.lazy-loading {
background: url('path/to/loading.gif') center center no-repeat;
}
.lazy-loaded {
background-image: none;
}然后我们就可以通过 CSS 来控制图片的样式了。
配置项
Lazy 实例有以下一些可配置的选项：
loadingClass：设置 loading 状态时动态添加的类名，默认为lazy-loading。loadedClass：设置 loaded 状态时动态添加的类名，默认为lazy-loaded。offset：设置图片距离视口多少距离触发加载，默认为200。
可以通过传递一个配置对象来修改这些选项：
const config = {
loadingClass: 'image-loading',
loadedClass: 'image-loaded',
offset: 150,
};
const lazy = new Lazy(config);示例代码
下面是一个完整的使用示例，展示了如何使用 st-lazy 实现图片懒加载：
-- -------------------- ---- -------
--------- -----
------
------
-------------- ---------------
-------
------ -
------ ------
------- ------
-------------- -----
-------------------- ------ -------
------------------ ----------
-
-------------- -
----------------- -------------------------------------------------------------------------
-
--------
-------
------
----------- ------------
---- ----------------
---- ------------- --------------------------------------------------
---- ------------- --------------------------------------------------
---- ------------- --------------------------------------------------
---- ------------- --------------------------------------------------
---- ------------- --------------------------------------------------
------
------- -----------------------------------------
--------
----- ---- - --- ------
------------- ----------------
------- ----
---
-------------------
---------
-------
-------上面的示例中，我们为每个需要懒加载的图片添加了 .image 类名和 data-src 属性。然后在 JavaScript 中创建了一个新的 Lazy 实例，通过 add 方法将所有 .image 元素注册到实例中。添加 loading 状态时会加上 image-loading 类名，和相关 CSS 配置一起展示 loading 状态的图片。
总结
st-lazy 是一个非常优秀的图片懒加载库，它的高效、简洁、易用深得开发者喜爱。本文介绍了 st-lazy 的基本使用及配置，希望能够对大家在项目中使用 st-lazy 提供一些帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671d030d0927023822964