Intersection Observer API 理解

今天在写div中滚动触底，分批加载内容的时候，发现一个新的 接口 Intersection Observer API 官方文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Intersection_Observer_API

看了下，确实很有用，值得研究学习。

官方解释：

交叉观察器 API（Intersection Observer API）提供了一种异步检测目标元素与祖先元素或顶级文档的视口相交情况变化的方法。过去，要检测一个元素是否可见或者两个元素是否相交并不容易，很多解决办法不可靠或性能很差。然而，随着互联网的发展，这种需求却与日俱增，比如，下面这些情况都需要用到相交检测：

1、在页面滚动时“懒加载”图像或其他内容。
2、实现“无限滚动”网站，在滚动过程中加载和显示越来越多的内容，这样用户就不必翻页了。
3、报告广告的可见度，以便计算广告收入。
4、根据用户是否能看到结果来决定是否执行任务或动画进程。

如果要看具体的解释和使用方法，可以去看官方文档。

下面我列举几个使用案例

1.图片惰性加载实践

<img class="lazy" data-src="real1.jpg" src="placeholder.jpg" alt="图片1">
<img class="lazy" data-src="real2.jpg" src="placeholder.jpg" alt="图片2">

使用 IntersectionObserver

if ('IntersectionObserver' in window) {const observer = new IntersectionObserver((entries, observer) => {entries.forEach(entry => {if (entry.isIntersecting) {const img = entry.target;img.src = img.dataset.src;img.onload = () => img.classList.remove('lazy');observer.unobserve(img);}});}, {rootMargin: '50px',threshold: 0.01});document.querySelectorAll('img.lazy').forEach(img => observer.observe(img));
}

2、检测div滚动触底

<div id="scrollableDiv" style="height: 300px; overflow-y: auto;"><!-- 内容 -->
</div>

var target = document.getElementById('scrollableDiv');
var observer = new IntersectionObserver(entries => {entries.forEach(entry => {if (entry.isIntersecting) {console.log('元素在视图中');} else {console.log('已滚动到底部');// 执行底部触达后的操作
        }});
}, {root: target, // 使用目标元素作为根元素，即相对于该元素滚动threshold: 1.0 // 表示完全可见时触发回调，此处设置为1.0表示完全到达底部时触发回调
});observer.observe(target);