1. 背景

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

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

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

2. 兼容性

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

3. 用法

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

const io = new IntersectionObserver(callback, option);

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

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

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

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

3.1 observe

該方法需要接收一個target參數(shù)，值是Element類型，用來指定被監(jiān)聽的目標元素

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

3.2 unobserve

該方法需要接收一個target參數(shù)，值是Element類型，用來指定停止監(jiān)聽的目標元素

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

3.3 disconnect

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

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

3.4 takeRecords

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

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

注意：

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

// 開始觀察多個元素
io.observe(domA);
io.observe(domB);
io.observe(domC);

4. callback 參數(shù)

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

callback一般會觸發(fā)兩次。一次是目標元素剛剛進入視口，另一次是完全離開視口。

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

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

• changes：這是一個數(shù)組，每個成員都是一個被觀察對象。舉例來說，如果同時有兩個被觀察的對象的可見性發(fā)生變化，那么changes數(shù)組里面就會打印出兩個元素，如果只觀察一個元素，我們打印changes[0]就能獲取到被觀察對象
• observer: 這是一個對象，返回我們在實例中傳入的第二個參數(shù)option（如果沒傳，則返回默認值）

5. IntersectionObserverEntry 對象

上面提到的changes數(shù)組中的每一項都是一個IntersectionObserverEntry 對象（下文簡稱io對象），對象提供目標元素的信息，一共有八個屬性，我們打印這個對象：

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

運行上面代碼，并且改變dom的可見性，這時控制臺可以看到一個對象：

每個屬性的含義如下：

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

6. 應(yīng)用

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

注意點

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

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

參考鏈接

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

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

最新評論