IntersectionObserver 接口（从属于 Intersection Observer API）提供了一种异步观察目标元素与其祖先元素或顶级文档视口（viewport）交叉状态的方法。其祖先元素或视口被称为根（root）。

当一个 IntersectionObserver 对象被创建时，其被配置为监听根中一段给定比例的可见区域。一旦 IntersectionObserver 被创建，则无法更改其配置，所以一个给定的观察者对象只能用来监听可见区域的特定变化值；然而，你可以在同一个观察者对象中配置监听多个目标元素。

属性

属性描述操作
root测试交叉时，用作边界盒的元素或文档。如果构造函数未传入 root 或其值为null，则默认使用顶级文档的视口。只读
rootMargin计算交叉时添加到根边界盒 (en-US)的矩形偏移量，可以有效的缩小或扩大根的判定范围从而满足计算需要。此属性返回的值可能与调用构造函数时指定的值不同，因此可能需要更改该值，以匹配内部要求。所有的偏移量均可用像素（px）或百分比（%）来表达，默认值为 “0px 0px 0px 0px”。只读
thresholds一个包含阈值的列表，按升序排列，列表中的每个阈值都是监听对象的交叉区域与边界区域的比率。当监听对象的任何阈值被越过时，都会生成一个通知（Notification）。如果构造器未传入值，则默认值为 0。只读

方法

方法描述
disconnect()使 IntersectionObserver 对象停止监听目标。
observe()使 IntersectionObserver 开始监听一个目标元素。
takeRecords()返回所有观察目标的 IntersectionObserverEntry 对象数组。
unobserve()使 IntersectionObserver 停止监听特定目标元素。

Demo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 监听 img 元素加载
let  intersectionObserver = new IntersectionObserver((entries, observer) => {
      entries.length && entries.map(item => {
            let isInWindow = item.intersectionRatio === 1;
            // 判断是否完全在可视范围
            if (isInWindow) {
                  let imgEl = item.target;
                  let lazySrc = imgEl && imgEl.dataset.lazySrc;
                  if (imgEl && lazySrc ) {
                        imgEl.src = lazySrc;
                        imgEl.classList.add('loaded');
                  }
            }
      })
}, { threshold: 1.0 })
// threshold 设置 阈值范围 0 - 1

var imgEls = document.querySelectorAll(".talk_item img")
Array.from(imgEls).map(imgEl => {
      // 添加监听目标元素
      intersectionObserver.observe(imgEl);
})

threshold 为 0 - 1 1 为可见视角!