IntersectionObserver API实现图片懒加载、无限滚动

壹_yi

已于 2023-06-14 08:55:22 修改

阅读量1.7k

点赞数 5

文章标签： javascript 前端

于 2023-05-17 11:36:49 首次发布

本文链接：https://blog.csdn.net/llllllhy_/article/details/130718699

版权

本文详细介绍了如何使用IntersectionObserver API来实现图片的懒加载和无限滚动效果。通过API的observe、unobserve和disconnect方法，配合回调函数，可以高效地监测元素是否进入视口。同时，文章还展示了如何封装图片懒加载函数，并应用到无限滚动场景中，以优化用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、IntersectionObserver API

IntersectionObserver 可以用来自动监听元素是否进入了设备的可视区域之内，而不需要频繁的计算来做这个判断。由于可见（visible）的本质是，目标元素与视口产生一个交叉区，所以这个 API 叫做"交叉观察器"

const observer = new IntersectionObserver(callback, option);

IntersectionObserver 是浏览器原生提供的构造函数，接受两个参数

callback：当可见性发生变化时的回调函数
option：配置对象（可选性）

构造函数的返回值生成的实例有四个方法：

observe：开始监听特定元素
unobserve：停止监听特定元素
disconnect：关闭监听工作
takeRecords：返回所有观察目标的对象数组

1.1、observe 方法

该方法需要接收一个target参数，值为Element类型，指定被监听的目标元素

// 获取dom元素
const target = document.getElementById("app")

// 开始观察 实例.observe(dom元素)
observer.observe(target);

1.2、unobserve 方法

该方法需要接收一个target参数，值是Element类型，用来指定停止监听的目标元素

// 获取dom元素
const target = document.getElementById("app")

// 开始观察 实例.observe(dom元素)
observer.unobserve(target);

1.3、disconnect 方法

该方法不需要接收参数，用来关闭观察器

// 关闭观察器
observer.disconnect();

1.4、takeRecords 方法

该方法不需要接收参数，返回所有被观察的对象，返回值是一个数组

// 关闭观察器
const observerList = observer.takeRecords();

1.5、callback 参数

目标元素的可见性发生变化时，就会调用观察器的回调函数callback
可见性变化：目标元素进入视口，目标元素完全离开视口

const observer = new IntersectionObserver((changes, observer) => {
   
  console.log(changes);  // 包括的目标元素
  console.log(observer); // 当前实例对象
});

1.6、 options

可以在1.5中的 console.log(observer) 看到

threshold: 决定了什么时候触发回调函数。它是一个数组，每个成员都是一个门槛值，默认为[0]，即交叉比例（intersectionRatio）达到0时触发回调函数。用户可以自定义这个数组。比如，[0, 0.25, 0.5, 0.75, 1]就表示当目标元素 0%、25%、50%、75%、100% 可见时，会触发回调函数。
root: 用于观察的根元素，默认是浏览器的视口，也可以指定具体元素，指定元素的时候用于观察的元素必须是指定元素的子元素
rootMargin: 用来扩大或者缩小视窗的的大小，使用css的定义方法，10px 10px 30px 20px表示top、right、bottom 和 left的值

2、IntersectionObserverEntry 对象

changes数组中每一项都是一个IntersectionObserverEntry 对象
changes相关参数

boundingClientRect：目标元素的矩形区域的信息
intersectionRatio：目标元素的可见比例，即intersectionRect占boundingClientRect的比例，完全可见时为1，完全不可见时小于等于0
intersectionRect：目标元素与视口（或根元素）的交叉区域的信息
isIntersecting: 布尔值，目标元素与交集观察者的根节点是否相交（常用）
isVisible: 布尔值，目标元素是否可见（不建议在生产环境中使用）
rootBounds：根元素的矩形区域的信息，getBoundingClientRect()方法的返回值，如果没有根元素（即直接相对于视口滚动），则返回null
target：被观察的目标元素，是一个 DOM 节点对象（常用）
time：可见性发生变化的时间，是一个高精度时间戳，单位为毫秒

3、相关效果

我们可以通过IntersectionObserver 来做到与滚动相关的效果

3.1、图片懒加载

首先需要观察懒加载元素，然后等元素进入可视化区域后设置图片的spc。还可以结合 IntersectionObserver.rootMargin 实现提前加载图片，一般可以设置为 1~2倍浏览器窗口的视口高度

HTML部分

<body>
    <h1>JavaScript 的歷史及現況</h1>

    <p>1990 年,科學家 Tim Berners-Lee 在互聯網的基礎上發明了萬維網 (World Wide Web),World Wide Web
        這個詞在互聯網早期經常提到,還一直影響至今,大家記得網址開端一般都是以 www 起首的嗎?就是 World Wide Web 的簡寫。發明了
        www,從此我們可以在網上互傳檔案。但這個時候的只能通過命令行模式 (Command Mode) 存取網絡,而且只能顯示文字,顯然是不方便的。</p>

    <p>1992 年史上第一個圖形化的網頁瀏覽器 Mosaic 誕生,1994 年改名為 Netscape Navigator (網景) 並推出 1.0 版本,市場佔有率超過
        90%。由於當時的互聯網速度很慢,而且上網費昂貴,Netscape
        公司為了優化瀏覽體驗,覺得有必要研發一套腳本語言,是在瀏覽器端運行的。例如我們在一個網站登入會員,忘了填寫用戶名稱就點擊了「登入」,這是候網頁再次載入,才提醒需要填寫用戶名稱,這顯然晚了一點。瀏覽器應該可以在用戶點擊「登入」時就進行初步檢查,在檢查到錯誤時及時彈出提示訊息讓用戶修正。
    </p>

    <p>Netscape 公司對於這種基於瀏覽器的腳本語言的想法是：功能不需要太強,語法較簡單,容易學習和應用。公司聘請了 Brendan Eich 研發這個腳本語言,據說他只用了 10
        天,就設計好這個語言的第一版,最初命名為 Mocha,及後改名為 LiveScript。</p>

    <p>而據說當時 Sun 公司的 Java 語言相當受歡迎,出於市場推廣的原因,固意將這門語言與 Java 在名義上扯上關係(而實際上幾乎沒有)。Netscape 與 Sun 公司達成「合作協議」允許將 LiveScript 命名為
        JavaScript。大家還記得當時有 JavaApplet 這種瀏覽器插件嗎?JavaApplet 是 Sun 公司發展出來,真正使用 Java 語言編寫,在瀏覽器端運行的應用程式,當時期望 JavaScript
        的角色是像膠水一樣將各部份連接起來。後來 JavaApplet 失敗了,JavaScript 卻發揚光大了。</p>

    <p>1996 年 JavaScript 隨著 Netscape 2.0 正式推出。</p>

    <p>1996 年 8 月 Microsoft 仿效 Netscape,於自己的 IE 瀏覽器發展出一門與 JavaScript 相近的腳本語言,取命 JScript。一山不能藏二虎,Netscape 公司將
        JavaScript 提交給 ECMA International(歐洲電腦製造商協會)進行標準化,它就是 ECMAScript。不過基於歷史原因及市場原因,大家都習慣用 JavaScript
        這個名字而非 ECMAScript。我們現在說的 JavaScript ES5 / ES6 等等,ES 就是 ECMA