简介
snpk 是一个 npm 包，它可以优化静态资源的加载和显示。它的设计初衷是为了改善用户体验，提高网站访问速度。
安装
安装 snpk 的最简单方法是使用 npm：
npm install snpk --save
基础使用
在 HTML 文件头部引用 snpk 可以像下面这样：
<head> <script type="module" src="https://unpkg.com/snpk"></script> </head>
snpk 提供了一些默认的配置项，如果你想自己定义配置项，你可以这样：
-- -------------------- ---- -------
------
------- --------------
------ - ------ - ---- -------
--------
-- ------
---
---------
------- ------------- --------------------------------------
-------现在你已经可以使用 snpk 加载你的静态资源了。你可以在 HTML 中按下面这样使用：
<img data-src="/path/to/image.jpg" alt="description">
这样就可以把图片延迟加载了。
配置项
snpk 提供了一些默认配置项，然而它们并不一定适合每个网站的需求，所以 snpk 支持自定义配置项。下面是一些常用的配置项：
threshold
threshold 是指距离视口边界多远时开始加载一个元素。默认值是 0。
config({
threshold: 300,
});root
root 是指父元素的根元素，简单来说是父元素所在的元素。默认值是 document.documentElement。
config({
root: document.body,
});rootMargin
rootMargin 是指根元素的偏移量，可以是正数或者负数。默认值是 '0px 0px 0px 0px'。
config({
rootMargin: '100px 0px 0px 0px',
});selector
selector 是指一个 container 里的所有 class 名称，针对这个 container 里的所有元素进行处理，默认是 js-lazyload。
config({
selector: '.my-lazyload',
});dataSrc
dataSrc 是指将要加载的图片地址所在的标签。默认值是 data-src。
config({
dataSrc: 'data-lazy',
});callbacks
callbacks 包括以下 4 种回调函数：
onEnter：元素进入根元素的视口时执行的回调函数。
onExit：元素离开根元素的视口时执行的回调函数。
onReveal：元素被加载完成后执行的回调函数。
onLoading：元素开始加载时执行的回调函数。
以上 4 个回调函数都有两个参数，一个是被操作的元素，另一个是触发事件的元素。
-- -------------------- ---- -------
--------
---------- -
-------- --------- --------------- -- -
-- -------------
--
------- --------- --------------- -- -
-- -------------
--
--------- --------- --------------- -- -
-- -----------
--
---------- --------- --------------- -- -
-- ----------
--
--
---实例
下面是一个实例。在实例中，我们使用 snpk 来加载一些图片，并在图片被加载完成后打印出一个成功的消息。
-- -------------------- ---- -------
--------- -----
------
------
----------- ----------
------- --------------
------ - ------ - ---- -------
--------
----------- --------
---------- -----
--------- ---------------
---------- -
--------- --------- -- -
----------------------
--
--
---
---------
------- ------------- --------------------------------------
-------
------------ -
------ ------
------- ------
----------- -----
-
--------
-------
------
---- ------------------- ------------------------------
---- ------------------- ------------------------------
---- ------------------- ------------------------------
-------
-------结束语
snpk 是一个出色的 npm 包，它可以改善网站的用户体验和速度。它提供了一些好用的默认配置项，但是如果你希望实现更自定义的效果，那么也一样可以使用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671d730d0927023822da3