在前端开发中，图片懒加载是一种常见的技巧，它能够优化页面性能并提高用户体验。其中，vanilla-lazyload 是一个轻量级、易于使用并且功能强大的 npm 包，可以帮助我们快速实现图片懒加载。
安装和引入
首先，我们需要安装 vanilla-lazyload，可以使用 npm 命令行工具进行安装：
npm install vanilla-lazyload
然后，在你的 HTML 文件中引入 vanilla-lazyload：
<script src="path/to/vanilla-lazyload.min.js"></script>
或者在 ES6 模块化环境下，可以使用以下方式导入：
import LazyLoad from 'vanilla-lazyload';
基本用法
一旦引入了 vanilla-lazyload，我们就可以开始使用它来实现图片懒加载了。基本的用法非常简单，只需要给需要懒加载的图片添加一个特定的 class（默认为 lazyload），然后初始化 LazyLoad 对象即可：
<img class="lazyload" data-src="path/to/image.jpg">
const lazyLoad = new LazyLoad();
这样，当页面滚动到图片所在位置时，图片就会被加载并显示出来。
配置项
除了基本的用法外，vanilla-lazyload 还提供了一些高级的配置项，可以让我们更加灵活地控制图片懒加载的行为。以下是一些常用的配置项：
threshold
默认为 200，表示图片距离视口底部的距离小于等于 200px 时开始加载。
const lazyLoad = new LazyLoad({
threshold: 300,
});data_src
默认为 data-src，表示图片真实地址的属性名。
const lazyLoad = new LazyLoad({
data_src: 'data-original',
});data_srcset
默认为 data-srcset，表示图片响应式地址的属性名。
const lazyLoad = new LazyLoad({
data_srcset: 'data-responsive',
});callback_loaded
表示图片加载完成后的回调函数。
const lazyLoad = new LazyLoad({
callback_loaded: function(element) {
console.log('Image loaded:', element);
},
});示例代码
最后，附上一个完整的示例代码，帮助大家更好地理解 vanilla-lazyload 的使用方法：
-- -------------------- ---- -------
---- ---- ---
---- ---------------- ---------------------------- --------------------------------- ----
---- ---------- ---
------- -----------------------------------------------
--------
----- -------- - --- ----------
---------- ----
------------ --------------
---------------- ----------------- -
------------------ --------- ---------
--
---
---------以上就是关于 npm 包 vanilla-lazyload 的使用教程，希望对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/34433