共计 1703 个字符，预计需要花费 5 分钟才能阅读完成。
intersection Observer 简介
点击查阅 MDN 关于此 api 的使用说明
这个 api 是用来检测 dom 元素交集的，常见的应用场景之一就是本文提到的对图片进行懒加载，即：拖动窗口滚动条，到达当前这个图片的时候，再去读取挂在自定义属性（比如：’data-src’）上的 url 地址，之后将该 url 地址写到到 src 属性上去进行下载、展示这个图片。因此，我们关注的重点是：该图片是否滚动到了当前窗口的可视区域。通常解决的办法是，监听窗口元素的 scroll 事件，在事件处理程序中对图片的位置做判断。然而，这么做的一个弊端是，因为 js 是单线程的，而 scroll 事件出现的又很密集，每次都去响应 scroll 事件可能会影响用户体验。
intersection Observer 的诞生就是为了处理这种类似于上文提到的元素交集检测。它会观察我们的目标元素，当目标元素出现在 root 元素的可视区域时便会触发一个（我们事先放进去的）回调函数，于是我们可以在回调函数里面处理业务逻辑。
这里出现了两个小概念，对应于本文实现的图片懒加载功能来说：
目标元素：指的就是那些我们需要懒加载的图片
root 元素指的就是目标元素的父窗口，比如这里的图片的父元素容器
利用 intersection Observer 实现懒加载
点此查看该案例的 stackblitz
查看该案例：
在 index.html 页面内有一个 scrollContainer，在里面首先是放了几段文字，之后是 5 个 img 元素，并将 img 的 url 地址写在了自定义属性 ’data-src’ 内。
在 css 文件内定义了一些样式，其中，move-in 是在我们对图片真正进行加载时才会添加的动画效果。
现在，无论我们怎么拖动滚动条都无法看见图片，因为我们仅仅是把 img 的 url 写在了自定义属性中而不是 src 属性中。接下来，我们需要利用 intersection Observer 对这些暂时看不见的图片元素进行观察，当确认他们滚动到了窗体的可视区域时，我们在回调函数中对其进行加载。
创建一个 observer：
const observer = new IntersectionObserver(callback，option)
option 配置 root 元素和回调函数触发机制，这里我们将 scrollContainer 这个 div 设为 root。callback 就是当检测到目标元素与 root 元素交集时会调用的函数，形如：
(entrances, observer)=>{
// entrances 是个数组对象，包含了所有的目标元素，通常我们会遍历它们，并判断每一个单独的个体是否与 root 元素产生了交集，如果是，那么我们就会执行一些逻辑
}
连接目标元素
刚才我们创建了 observer，并且设置了它的 root 元素，现在需要告诉这个 observer，我们需要观察哪些目标元素与此 root 元素的交集。通过 observer.observe(target) 进行链接
最终的代码
const imgs = document.querySelectorAll(‘img’) // 获取所有待观察的目标元素
var options = {
root: document.querySelector(‘.scrollContainer’),
rootMargin: ‘0px’,
threshold: 1.0
}
function lazyLoad(target) {
const observer = new IntersectionObserver((entrances, observer) => {
entrances.forEach(entrance => {
if (entrance.isIntersecting) {
const img = entrance.target;
const src = img.getAttribute(‘data-src’);
img.setAttribute(‘src’, src)
img.classList.add(‘move-in’)
observer.disconnect()
}
})
}, options);
observer.observe(target)
}
imgs.forEach(lazyLoad)
