npm 包 element-visibility-watcher 使用教程

前端工程中经常需要对元素的可见性进行监测，如果已加载但未展示的元素不需要进行资源加载，这样可以提高网站的速度和性能。而 element-visibility-watcher 正是一款帮助我们实现这一功能的 npm 包。

安装

安装 element-visibility-watcher 的 npm 包很简单：

npm install element-visibility-watcher

API

element-visibility-watcher 提供了两个 API：

• watch
• unwatch

watch(target, handler)

watch API 用于监测指定元素是否处于可见状态。第一个参数是需要监测的 DOM 元素，第二个参数是可选的回调函数，它会在目标元素进入视口时被调用。

示例代码：

import { watch } from 'element-visibility-watcher';

const element = document.getElementById('watched-element');
watch(element, () => {
  console.log('Element is visible!');
});

可以看到，我们使用了 watch API 来监测 ID 为 watched-element 的元素，当它进入视口时，会触发回调函数并输出相应的提示信息。

unwatch(target)

unwatch API 可以取消对指定元素的监测，使其不再受到可见性的影响。

示例代码：

import { unwatch } from 'element-visibility-watcher';

const element = document.getElementById('watched-element');
unwatch(element);

可以看到，我们使用了 unwatch API 来取消对 ID 为 watched-element 的元素的监测。

相关设置

除了上面介绍的监测和取消监测 API 外，element-visibility-watcher 还提供了一些相关的设置，如下：

offset

offset 设置是用于控制元素何时被认为是“可见”的。默认情况下，元素在进入视口 50% 的时候被认为是可见的。

示例代码：

import { watch } from 'element-visibility-watcher';

const element = document.getElementById('watched-element');
watch(element, () => {
  console.log('Element is visible!');
}, { offset: 0.25 });

可以看到，我们通过 { offset: 0.25 } 来设置元素在进入视口 25% 的时候被认为是可见的。

once

once 设置是用于控制回调函数是否只会被调用一次。默认情况下，回调函数在目标元素每次进入视口都会被调用。

示例代码：

import { watch } from 'element-visibility-watcher';

const element = document.getElementById('watched-element');
watch(element, () => {
  console.log('Element is visible!');
}, { once: true });

可以看到，我们通过 { once: true } 来设置回调函数只会在目标元素第一次进入视口的时候被调用。

总结

使用 element-visibility-watcher 可以很方便地监测网站中的元素可见性，从而提高网站的性能和用户体验。我们需要了解它的 API 和相关设置，并灵活运用在自己的前端项目中。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671d730d0927023822de3