简介
bodymovin-progressively-load-on-scroll 是一个优化 Lottie（the bodymovin library） 动画在页面中加载的 npm 包。它可以帮助使用者在页面滚动时，延迟加载 Lottie 动画，以达到减少页面加载时间的目的。
安装
可以通过 npm 安装该 package：
npm install bodymovin-progressively-load-on-scroll
使用
引入该包，使用 ProgressivelyLoadOnScroll 函数通过以下步骤使用：
- 创建一个
div元素作为 Lottie 动画的容器 - 配置
options对象传入ProgressivelyLoadOnScroll - 动画将在页面滚动到 Lottie 容器的位置延迟加载。
-- -------------------- ---- ------- ------ ------------------------- ---- ----------------------------------------- ------ ------------- ---- -------------- ----- ------------------ - ------------------------------ ---------------------------------------------- ----- ------- - - -------------- -------------- ---------- ------------------- --------- ------ ----- ----- --------- ------ ---------- ----- - ----- ------------ - -----------------------------------
配置选项
animationData: Animation JSON 数据container: 放置 Lottie 动画的 DOM 元素renderer: 渲染器类型，目前支持 canvas 或者 svgloop: 是否循环autoplay: 是否自动播放prerender: 预先渲染，默认为false，设置为true时可以减少加载时间
示例代码
该 npm 包的示例代码对于学习和使用该包非常有帮助。以下是一个页面滚动加载理论与代码实现的完整示例。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------------
-------
------
---- -------------- ---------------
---- ------------------------------
------- ------------------------------------------------------------------------------------
------- -------------------------------
--------
----- ------------------ - ----------------------------------------------
----- ------- - -
-------------- -
---- --------
----- ---
----- --
----- ----
---- ----
---- ----
----- ----------
------ --
--------- ---
--------- -
-
------ --
------ --
----- --
----- ----------
----- --
----- -
---- -
---- --
---- ----
----- --
--
---- -
---- --
---- --
----- --
--
---- -
---- -----
---- --
---- -
----
----
-
--
----- -
--
---- -
---- --
---- -
--
--
-
--
----- -
--
---- -
---- --
---- -
----
----
---
--
----- -
-
--
----- --
--------- -
-
----- -----
----- -
-
----- -----
---- --
---- -
---- --
---- -
---
--
--
----- -
--
---- -
---- --
---- -
--
-
--
----- -
--
---- -
---- --
---- ---
----- -
--
----- ---------- ---- ---
----- -----
-
--
----- -------- --------
----- --
------ --
----- --
----- --
----- ----- ------ -------
----- -----
-
--
----- --
----- ----
----- --
----- -
-
-
--
---------- -------------------
--------- ------
----- -----
--------- ------
---------- -----
-
----- ------------ - -----------------------------------
---------
-------
-------在页面滚动到 #animationContainer 时，Lottie 动画将会被延迟加载。该示例使用了本地 json 文件，但实际使用时可以通过网络获取数据。
结论
bodymovin-progressively-load-on-scroll 可以帮助开发者在页面滚动时，确认动画的加载时间，从而提升页面的性能。 期望该教程对读者学习该 npm 包的使用方法和帮助非常大。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64011