IntersectionObserver 实现图片懒加载、列表无限滚动等功能

手机

34岁干部挪用570万公款买彩票获刑十年半：痴迷中大奖，曾一天花十余万买彩票

极氪001市场表现如何？极氪CEO安聪慧：订单量显著增加

IntersectionObserver 实现图片懒加载、列表无限滚动等功能

2023-08-24 10:15:11 来源：博客园

过去，要检测一个元素是否可见或者两个元素是否相交并不容易，比如实现图片懒加载、内容无限滚动等功能时，都需要通过getBoundingClientRect()写大量的逻辑计算或者依靠scroll事件监听等性能很差方式来实现。

(相关资料图)

现在，依靠IntersectionObserver（交叉观察器）我们能非常便捷且高效的实现上述功能。其实就是观察一个元素,当他出现的时候进行某些操作,比如无限滚动的实现,我们想要无限滚动的列表的最后一个元素,他出现我们就给列表增加元素把他挤到后面,这样这个元素就看不到了,这样就可以继续滚动.

Intersection Observer API - Web API 接口参考 | MDNIntersectionObserver API 使用教程 - 阮一峰的网络日志

一、api

// 创建实例const observer = new IntersectionObserver(callback, option); // 开始观察element1observer.observe(element1); // 开始观察element2observer.observe(element2); // 停止观察observer.unobserve(element); // 关闭观察器observer.disconnect();

IntersectionObserver是浏览器原生提供的构造函数，接受两个参数：callback是可见性变化时的回调函数，option是配置对象（该参数可选）。

构造函数的返回值是一个观察器实例。实例的observe方法可以指定观察哪个 DOM 节点，如果需要观察多个DOM节点可以多次添加observe方法。

//初始化一个实例var observer = new IntersectionObserver(changes => {    for (const change of changes) {        console.log(change.time);        // 当可视状态变化时，状态发送改变的时间戳        // 对比时间为，实例化的时间，        // 比如，值为1000时，表示在IntersectionObserver实例化的1秒钟之后，触发该元素的可视性变化        console.log(change.rootBounds);        // 根元素的矩形区域信息，即为getBoundingClientRect方法返回的值        console.log(change.boundingClientRect);        // target.boundingClientRect()        // 目标元素的矩形区域的信息        console.log(change.intersectionRect);        // 目标元素与视口（或根元素）的交叉区域的信息        console.log(change.intersectionRatio);        // 目标元素的可见比例，即intersectionRect占boundingClientRect的比例，        // 完全可见时为1，完全不可见时小于等于0        console.log(change.target);        // 被观察的目标元素，是一个 DOM 节点对象        // 当前可视区域正在变化的元素    }}, {});// 对元素target添加监听，当target元素变化时，就会触发上述的回调observer.observe(target);// 移除一个监听，移除之后，target元素的可视区域变化，将不再触发前面的回调函数observer.unobserve(target);// 停止所有的监听observer.disconnect();

二、callback参数

当以下情况发生时会调用回调函数：

Observer 第一次监听目标元素的时候
每当目标元素与设备视窗或者其他指定元素发生交集的时候执行

callback函数的参数（entries）是一个数组，每个成员都是一个IntersectionObserverEntry对象。举例来说，如果同时有两个被观察的对象的可见性发生变化，entries数组就会有两个成员。

每个IntersectionObserverEntry对象属性含义如下：

boundingClientRect：目标元素的矩形区域的信息
intersectionRatio：目标元素的可见比例，即intersectionRect占boundingClientRect的比例，完全可见时为1，完全不可见时小于等于0
intersectionRect：目标元素与视口（或根元素）的交叉区域的信息
rootBounds：根元素的矩形区域的信息，getBoundingClientRect()方法的返回值，如果没有根元素（即直接相对于视口滚动），则返回null
isIntersecting：目标元素是否与视口（或根元素）交叉
isVisible：并未查阅到相关资料，且经过测试其并不会发生变化
target：被观察的目标元素，是一个 DOM 节点对象
time：可见性发生变化的时间，是一个高精度时间戳，单位为毫秒

三、Option对象

IntersectionObserver构造函数的第二个参数是一个配置对象。它可以设置以下属性。

root：指定根元素，用于检查目标的可见性。必须是目标元素的父级元素。如果未指定或者为null，则默认为浏览器视窗。rootMargin：根元素的外边距，类似于 CSS 中的margin属性,比如 "10px 20px 30px 40px" (top、right、bottom、left)。如果有指定 root 参数，则 rootMargin 也可以使用百分比来取值。该属性值是用作 root 元素和 target 发生交集时候的计算交集的区域范围，使用该属性可以控制 root 元素每一边的收缩或者扩张。默认值为四个边距全是 0。threshold：目标元素与根元素的交叉比例，可以是单一的 number 也可以是 number 数组，比如，[0, 0.25, 0.5, 0.75, 1]就表示当目标元素 0%、25%、50%、75%、100% 可见时，会触发回调函数。

四、注意事项

IntersectionObserverAPI 是异步的，不随着目标元素的滚动同步触发。
注册的回调函数将会在主线程中被执行，所以该函数执行速度要尽可能的快。如果有一些耗时的操作需要执行，建议使用 Window.requestIdleCallback() 方法。

五、无限滚动

主要就是观察

        IntersectionObserver            
        加载中...
    
<script>const container = document.querySelector("#container");const loadMore = document.querySelector("#loadMore");let index = 0;//批量添加元素const loadItems = (count) => {    [...Array(count).keys()].forEach((key) => {        //当超过100时停止所有观察        if(index == 100){            observer.disconnect();            return;        }        const p = document.createElement("P");        p.innerHTML = `${key + index}`;        container.appendChild(p)    })    index += count;}//初始化一个观察实例const observer = new IntersectionObserver((entries) => {    //目标元素余市口交叉则显示true,则添加元素    entries.forEach((entry) => {        if (entry.isIntersecting) {            loadItems(20);        }    })},{});//开始观察observer.observe(loadMore);</script>

关键词：