什么是 boundary？
boundary 是一个前端库，它可以帮助我们快速计算元素在可视区域的位置和状态。通过 boundary，我们可以轻松地实现懒加载、无限滚动等常见的页面优化方案。
boundary 使用了 IntersectionObserver API 来监听元素与根元素（例如窗口）的交叉状态，从而得知元素是否在视口内。相比于手动计算元素位置，IntersectionObserver 的性能更好，并且可以自动处理大量的交叉事件。
安装和使用
安装
我们可以使用 npm 来安装 boundary：
--- ------- ----------- ------
引入
在安装完成后，我们需要引入 boundary：
------ - -------------- - ---- -----------------
创建实例
创建 boundary 实例时，我们需要指定要观察的目标元素：
----- ------- - -------------------------------------- ----- -------- - ------------------------
监听事件
boundary 提供了多个事件用于监听元素的交叉状态：
enter: 元素进入视口时触发。leave: 元素离开视口时触发。move: 元素在视口中移动时触发。visible: 元素完全可见时触发。invisible: 元素完全不可见时触发。
我们可以通过以下方式监听事件：
-------------------- -- ------ -- -- - ---------------------- --------- ---
方法
boundary 还提供了一些方法用于查询元素的状态：
intersecting: 判断元素是否与根元素交叉。ratio: 获取元素与根元素的交叉比例。rect: 获取元素与根元素的交叉矩形。
-- ------------------------- - ------------------------- -
示例代码
下面是一个简单的示例，它使用 boundary 来实现图片懒加载：
---- ------------ ---------------------------- --
--------
----- ------ - -----------------------------------
----- ------- - -
----- -----
----------- ------
---------- ----
--
----- --------------- - --------- --------- -- -
----------------------- -- -
-- ------------------------ - -- -
----- --- - -------------
------- - ----------------
------------------------
-
---
--
----- -------- - --- ------------------------------------- ---------
-------------------- -- -
----------------------
---
---------在这个示例中，我们将所有带有 .lazy 类的图片设置为默认占位图，并将真正的图片链接存储在 data-src 属性中。然后，我们使用 IntersectionObserver 监听这些图片与根元素（即窗口）的交叉状态。当图片进入视口时，我们将真正的图片链接赋值给 src 属性。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/41710