前端工程中经常需要对元素的可见性进行监测，如果已加载但未展示的元素不需要进行资源加载，这样可以提高网站的速度和性能。而 element-visibility-watcher 正是一款帮助我们实现这一功能的 npm 包。
安装
安装 element-visibility-watcher 的 npm 包很简单：
--- ------- --------------------------
API
element-visibility-watcher 提供了两个 API：
watchunwatch
watch(target, handler)
watch API 用于监测指定元素是否处于可见状态。第一个参数是需要监测的 DOM 元素，第二个参数是可选的回调函数，它会在目标元素进入视口时被调用。
示例代码：
------ - ----- - ---- ----------------------------- ----- ------- - ------------------------------------------- -------------- -- -- - -------------------- -- ----------- ---
可以看到，我们使用了 watch API 来监测 ID 为 watched-element 的元素，当它进入视口时，会触发回调函数并输出相应的提示信息。
unwatch(target)
unwatch API 可以取消对指定元素的监测，使其不再受到可见性的影响。
示例代码：
------ - ------- - ---- ----------------------------- ----- ------- - ------------------------------------------- -----------------
可以看到，我们使用了 unwatch API 来取消对 ID 为 watched-element 的元素的监测。
相关设置
除了上面介绍的监测和取消监测 API 外，element-visibility-watcher 还提供了一些相关的设置，如下：
offset
offset 设置是用于控制元素何时被认为是“可见”的。默认情况下，元素在进入视口 50% 的时候被认为是可见的。
示例代码：
------ - ----- - ---- ----------------------------- ----- ------- - ------------------------------------------- -------------- -- -- - -------------------- -- ----------- -- - ------- ---- ---
可以看到，我们通过 { offset: 0.25 } 来设置元素在进入视口 25% 的时候被认为是可见的。
once
once 设置是用于控制回调函数是否只会被调用一次。默认情况下，回调函数在目标元素每次进入视口都会被调用。
示例代码：
------ - ----- - ---- ----------------------------- ----- ------- - ------------------------------------------- -------------- -- -- - -------------------- -- ----------- -- - ----- ---- ---
可以看到，我们通过 { once: true } 来设置回调函数只会在目标元素第一次进入视口的时候被调用。
总结
使用 element-visibility-watcher 可以很方便地监测网站中的元素可见性，从而提高网站的性能和用户体验。我们需要了解它的 API 和相关设置，并灵活运用在自己的前端项目中。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600671d730d0927023822de3