介绍
lazy-graph 是一个前端的 npm 包，它可以帮助你方便地使用无限滚动加载图片的功能。
lazy-graph 解决了在加载大量图片时，浏览器会发生卡顿的问题。通过只加载当前视图中需要显示的图片，它可以极大地提高页面的性能，并提高用户体验。
安装
你可以使用 npm 安装 lazy-graph：
npm install lazy-graph --save
使用
引入 lazy-graph：
import LazyGraph from 'lazy-graph';
在渲染需要滚动加载图片的地方，创建一个容器元素：
<div class="lazy-container"> <img src="/path/to/placeholder.png" data-src="/path/to/real-image.jpg"> <img src="/path/to/placeholder.png" data-src="/path/to/real-image.jpg"> <img src="/path/to/placeholder.png" data-src="/path/to/real-image.jpg"> ... </div>
在你的 JavaScript 文件中使用 LazyGraph 类：
const container = document.querySelector('.lazy-container');
const lazyGraph = new LazyGraph(container, {
threshold: 0.1, // 预加载的阈值
callback: function(node) {
// 图片加载完成后的回调
// node 代表图片元素节点
}
});在图片节点中，我们需要把需要加载的图片的地址设置为 data-src 属性。这是因为在页面加载时，我们需要将图片的真实地址从 src 属性移动到 data-src 属性，并且在图片需要时加载它。我们还需要在页面加载时给图片设置占位图。
<img src="/path/to/placeholder.png" data-src="/path/to/real-image.jpg">
配置选项
lazy-graph 支持以下配置选项：
- threshold: 预加载的阈值，0 ~ 1 之间的数值；
- loadHandler: 加载图片时的回调函数；
- callback: 图片加载完成后的回调函数。
-- -------------------- ---- -------
----- --------- - ------------------------------------------
----- --------- - --- -------------------- -
---------- ---- -- ------
------------ -------------- -
-- ----------
-- ---- --------
--
--------- -------------- -
-- ----------
-- ---- --------
-
---示例代码
-- -------------------- ---- -------
---- ---------- ---
--------- -----
----- ----------
------
----- ----------------
----------------- ------------
-------
--------------- -
------ ------
------- - -----
----------- -------
------- ------
-
--------------- --- -
-------- ------
------ -----
------- -----
-
--------
-------
------
---- -----------------------
---- ------------------------------ -------------------------------
---- ------------------------------ -------------------------------
---- ------------------------------ -------------------------------
---- ------------------------------ -------------------------------
---- ------------------------------ -------------------------------
---
------
------- --------------------------
-------
--------- -------------------- ---- -------
-- --------
------ --------- ---- -------------
----- --------- - ------------------------------------------
----- --------- - --- -------------------- -
---------- ----
--------- -------------- -
----------------- ----------
-
---结束语
lazy-graph 是一个非常有用的 npm 包，在前端开发中可以给你的项目带来很大的提升。我希望这篇文章能够帮助你学习并使用 lazy-graph。如果你在使用过程中遇到任何问题，可以查看 lazy-graph 的 GitHub 仓库，或者提交一个 issue，我会尽早回复。谢谢阅读！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ac781e8991b448d85f6