随着前端技术的不断发展，网页中的图片数量越来越多，同时也给用户带来了更好的视觉体验。但是，过多的图片也会影响页面的加载速度，导致用户等待时间过长。针对这个问题，有一种叫做懒加载(lazy load)的技术，可以让图片在用户滚动到它们的位置之前不加载，从而提高网站的性能和用户体验。今天我们要介绍的就是一款名为 lari-lazy-image 的 npm 包，它提供了一种非常便捷的方式实现图片的懒加载。
安装
使用 lari-lazy-image 需要先在项目中安装该包。可以使用 Node.js 中的 npm 包管理工具，使用如下命令进行安装：
npm install lari-lazy-image
使用方法
安装完成之后，我们就可以在前端项目中使用 lari-lazy-image 来实现图片的懒加载。以下是具体的使用方法。
1. 引入 lari-lazy-image
在 HTML 或者 JavaScript 文件中引入 lari-lazy-image 包。
<script src="node_modules/lari-lazy-image/lib/lari_lazy_image.js"></script>
2. 准备需要懒加载的图片
在 HTML 文件中，我们需要指定需要懒加载的图片的 URL，并设置对应的 data-src 和 class。data-src 属性是图片真正的 URL，而 class 则是 lari-lazy-image 包识别该图片的标志。
<img class="lazy" data-src="https://www.example.com/image.jpg" />
3. 初始化 lari-lazy-image
在 JavaScript 文件中，我们需要初始化 lari-lazy-image。这个过程也十分简单，只需要声明一个 LariLazyImage 对象即可。初始化完成后，所有以指定 class 为类名的图片都将被转化为懒加载图片。
var lazyImage = new LariLazyImage({
class_name: 'lazy'
});上面的代码定义了一个名为 lazyImage 的 LariLazyImage 对象，并将参数 class_name 设置为 ‘lazy’。这样我们就成功的给图片添加了懒加载效果。
实例演示
下面我们用一个完整的实例来演示 lari-lazy-image 的使用方法。首先，我们在 HTML 文件中指定需要懒加载的图片。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------------- ------------
------- -------------------------------------------------------------------
-------
--- -
------ ------
----------- -----
-
--------
-------
------
----------------- ---------
---- -------------
---- ------------ --------------------------------------------- --
---- ------------ --------------------------------------------- --
---- ------------ --------------------------------------------- --
---- ------------ --------------------------------------------- --
---- ------------ --------------------------------------------- --
------
--------
--- --------- - --- ---------------
----------- ------
---
---------
-------
-------我们指定了 class 为 ‘lazy’ 的五个图片，它们的真实地址为 https://www.example.com/image1.jpg … https://www.example.com/image5.jpg。接下来打开 HTML 文件，你会发现只有可视区域内的图片会被加载，其他图片会在需要的时候再加载。
总结
使用 lari-lazy-image 包可以非常便捷地实现图片的懒加载。通过 lari-lazy-image，网站可以提高性能并提供更好的用户体验。希望本文能够帮助你更好地理解和使用 lari-lazy-image。
示例代码：https://github.com/lario0215/lari-lazy-image-example
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600552ff81e8991b448d0610