IntersectionObserver
用于监听元素是否进入视口(与视口是否存在相交),在图片懒加载等场景中被广泛应用,不过除了这个基础的用法,他还有更强大的能力。
使用场景
目前已知的 IntersectionObserver
常用使用场景包括:
- 图片或其它内容的懒加载
- 滚动加载
- 判断用户是否能看见内容并作一些特定优化如停止动画、暂停视频等
其它的还有如用作广告是否出现在可视区域来判断是否计费等。
如何使用
要使用 IntersectionObserver
首先需要实例化一个 observer
,然后通过调用它的 observe
来监听对应元素,元素在视口中的占比变化时会调用回调函数,默认情况下会在元素进入视口和脱离视口时触发。
const observer = new IntersectionObserver(callback, options);
observer.observe(target);
回调中接收到的参数主要为 entries
和 observer
,observer
就是上面定义的 observer
的引用。因为一个 observer
可以 observe
多个元素,所以 entries
为数组:
const callback = entries => {entries.forEach(entry => {con