1. 背景

網(wǎng)頁(yè)開(kāi)發(fā)時(shí)，不管是在移動(dòng)端，還是PC端，都有個(gè)很重要的概念，叫做動(dòng)態(tài)懶加載，適用于一些圖片資源（或者數(shù)據(jù)）特別多的場(chǎng)景中，這個(gè)時(shí)候，我們常常需要了解某個(gè)元素是否進(jìn)入了“視口”（viewport），即用戶(hù)能不能看到它。

傳統(tǒng)的實(shí)現(xiàn)方法是，監(jiān)聽(tīng)到scroll事件或者使用setInterval來(lái)判斷，調(diào)用目標(biāo)元素的getBoundingClientRect()方法，得到它對(duì)應(yīng)于視口左上角的坐標(biāo)，再判斷是否在視口之內(nèi)。這種方法的缺點(diǎn)是，由于scroll事件觸發(fā)頻率高，計(jì)算量很大，如果不做防抖節(jié)流的話(huà)，很容易造成性能問(wèn)題，而setInterval由于其有間歇期，也會(huì)出現(xiàn)體驗(yàn)問(wèn)題。

所以在幾年前，Chrome率先提供了一個(gè)新的API，就是IntersectionObserver，它可以用來(lái)自動(dòng)監(jiān)聽(tīng)元素是否進(jìn)入了設(shè)備的可視區(qū)域之內(nèi)，而不需要頻繁的計(jì)算來(lái)做這個(gè)判斷。由于可見(jiàn)（visible）的本質(zhì)是，目標(biāo)元素與視口產(chǎn)生一個(gè)交叉區(qū)，所以這個(gè) API 叫做"交叉觀察器"。

2. 兼容性

由于這個(gè)api問(wèn)世已經(jīng)很多年了，所以對(duì)瀏覽器的支持性還是不錯(cuò)的，完全可以上生產(chǎn)環(huán)境，點(diǎn)擊這里可以看看當(dāng)前瀏覽器對(duì)于IntersectionObserver的支持性：

3. 用法

該API的調(diào)用非常簡(jiǎn)單：

const io = new IntersectionObserver(callback, option);

上面代碼中，IntersectionObserver 是瀏覽器原生提供的構(gòu)造函數(shù)，接受兩個(gè)參數(shù)：

• callback：可見(jiàn)性發(fā)現(xiàn)變化時(shí)的回調(diào)函數(shù)
• option：配置對(duì)象（可選）。

構(gòu)造函數(shù)的返回值是一個(gè)觀察器實(shí)例。實(shí)例一共有4個(gè)方法：

• observe：開(kāi)始監(jiān)聽(tīng)特定元素
• unobserve：停止監(jiān)聽(tīng)特定元素
• disconnect：關(guān)閉監(jiān)聽(tīng)工作
• takeRecords：返回所有觀察目標(biāo)的對(duì)象數(shù)組

3.1 observe

該方法需要接收一個(gè)target參數(shù)，值是Element類(lèi)型，用來(lái)指定被監(jiān)聽(tīng)的目標(biāo)元素

// 獲取元素
const target = document.getElementById("dom");
// 開(kāi)始觀察
io.observe(target);

3.2 unobserve

該方法需要接收一個(gè)target參數(shù)，值是Element類(lèi)型，用來(lái)指定停止監(jiān)聽(tīng)的目標(biāo)元素

// 獲取元素
const target = document.getElementById("dom");
// 停止觀察
io.unobserve(target);

3.3 disconnect

該方法不需要接收參數(shù)，用來(lái)關(guān)閉觀察器

// 關(guān)閉觀察器
io.disconnect();

3.4 takeRecords

該方法不需要接收參數(shù)，返回所有被觀察的對(duì)象，返回值是一個(gè)數(shù)組

// 獲取被觀察元素
const observerList = io.takeRecords();

注意：

observe方法的參數(shù)是一個(gè) DOM 節(jié)點(diǎn)，如果需要觀察多個(gè)節(jié)點(diǎn)，就要多次調(diào)用這個(gè)方法：

// 開(kāi)始觀察多個(gè)元素
io.observe(domA);
io.observe(domB);
io.observe(domC);

4. callback 參數(shù)

目標(biāo)元素的可見(jiàn)性變化時(shí)，就會(huì)調(diào)用觀察器的回調(diào)函數(shù)callback。

callback一般會(huì)觸發(fā)兩次。一次是目標(biāo)元素剛剛進(jìn)入視口，另一次是完全離開(kāi)視口。

const io = new IntersectionObserver((changes, observer) => {
  console.log(changes);
  console.log(observer);
});

上面代碼中，callback函數(shù)的參數(shù)接收兩個(gè)參數(shù)changes和observer：

• changes：這是一個(gè)數(shù)組，每個(gè)成員都是一個(gè)被觀察對(duì)象。舉例來(lái)說(shuō)，如果同時(shí)有兩個(gè)被觀察的對(duì)象的可見(jiàn)性發(fā)生變化，那么changes數(shù)組里面就會(huì)打印出兩個(gè)元素，如果只觀察一個(gè)元素，我們打印changes[0]就能獲取到被觀察對(duì)象
• observer: 這是一個(gè)對(duì)象，返回我們?cè)趯?shí)例中傳入的第二個(gè)參數(shù)option（如果沒(méi)傳，則返回默認(rèn)值）

5. IntersectionObserverEntry 對(duì)象

上面提到的changes數(shù)組中的每一項(xiàng)都是一個(gè)IntersectionObserverEntry 對(duì)象（下文簡(jiǎn)稱(chēng)io對(duì)象），對(duì)象提供目標(biāo)元素的信息，一共有八個(gè)屬性，我們打印這個(gè)對(duì)象：

// 創(chuàng)建實(shí)例
const io = new IntersectionObserver(changes => {
  changes.forEach(change => {
    console.log(change);
  });
});
// 獲取元素
const target = document.getElementById("dom");
// 開(kāi)始監(jiān)聽(tīng)
io.observe(target);

運(yùn)行上面代碼，并且改變dom的可見(jiàn)性，這時(shí)控制臺(tái)可以看到一個(gè)對(duì)象：

每個(gè)屬性的含義如下：

• boundingClientRect：目標(biāo)元素的矩形區(qū)域的信息
• intersectionRatio：目標(biāo)元素的可見(jiàn)比例，即intersectionRect占boundingClientRect的比例，完全可見(jiàn)時(shí)為1，完全不可見(jiàn)時(shí)小于等于0
• intersectionRect：目標(biāo)元素與視口（或根元素）的交叉區(qū)域的信息
• isIntersecting: 布爾值，目標(biāo)元素與交集觀察者的根節(jié)點(diǎn)是否相交
• isVisible: 布爾值，目標(biāo)元素是否可見(jiàn)（該屬性還在試驗(yàn)階段，不建議在生產(chǎn)環(huán)境中使用）
• rootBounds：根元素的矩形區(qū)域的信息，getBoundingClientRect()方法的返回值，如果沒(méi)有根元素（即直接相對(duì)于視口滾動(dòng)），則返回null
• target：被觀察的目標(biāo)元素，是一個(gè) DOM 節(jié)點(diǎn)對(duì)象
• time：可見(jiàn)性發(fā)生變化的時(shí)間，是一個(gè)高精度時(shí)間戳，單位為毫秒

6. 應(yīng)用

• 預(yù)加載（滾動(dòng)加載，翻頁(yè)加載，無(wú)限加載）
• 懶加載（后加載、惰性加載）
• 其它

注意點(diǎn)

IntersectionObserver API 是異步的，不隨著目標(biāo)元素的滾動(dòng)同步觸發(fā)。

規(guī)格寫(xiě)明，IntersectionObserver的實(shí)現(xiàn)，應(yīng)該采用requestIdleCallback()，即只有線(xiàn)程空閑下來(lái)，才會(huì)執(zhí)行觀察器。這意味著，這個(gè)觀察器的優(yōu)先級(jí)非常低，只在其他任務(wù)執(zhí)行完，瀏覽器有了空閑才會(huì)執(zhí)行。

參考鏈接

• http://www.dbjr.com.cn/article/99686.htm
• developer.mozilla.org/zh-CN/docs/…
• caniuse.com/#search=Int…

以上就是交叉觀察器 IntersectionObserver用法詳解的詳細(xì)內(nèi)容，更多關(guān)于交叉觀察器 IntersectionObserver的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論