交叉觀察器?IntersectionObserver用法詳解
1. 背景
網(wǎng)頁開發(fā)時,不管是在移動端,還是PC端,都有個很重要的概念,叫做動態(tài)懶加載,適用于一些圖片資源(或者數(shù)據(jù))特別多的場景中,這個時候,我們常常需要了解某個元素是否進(jìn)入了“視口”(viewport),即用戶能不能看到它。
傳統(tǒng)的實現(xiàn)方法是,監(jiān)聽到scroll
事件或者使用setInterval
來判斷,調(diào)用目標(biāo)元素的getBoundingClientRect()方法,得到它對應(yīng)于視口左上角的坐標(biāo),再判斷是否在視口之內(nèi)。這種方法的缺點是,由于scroll
事件觸發(fā)頻率高,計算量很大,如果不做防抖節(jié)流的話,很容易造成性能問題,而setInterval
由于其有間歇期,也會出現(xiàn)體驗問題。
所以在幾年前,Chrome率先提供了一個新的API
,就是IntersectionObserver,它可以用來自動監(jiān)聽元素是否進(jìn)入了設(shè)備的可視區(qū)域之內(nèi),而不需要頻繁的計算來做這個判斷。由于可見(visible)的本質(zhì)是,目標(biāo)元素與視口產(chǎn)生一個交叉區(qū),所以這個 API 叫做"交叉觀察器"。
2. 兼容性
由于這個api問世已經(jīng)很多年了,所以對瀏覽器的支持性還是不錯的,完全可以上生產(chǎn)環(huán)境,點擊這里可以看看當(dāng)前瀏覽器對于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
:返回所有觀察目標(biāo)的對象數(shù)組
3.1 observe
該方法需要接收一個target參數(shù),值是Element類型,用來指定被監(jiān)聽的目標(biāo)元素
// 獲取元素 const target = document.getElementById("dom"); // 開始觀察 io.observe(target);
3.2 unobserve
該方法需要接收一個target參數(shù),值是Element類型,用來指定停止監(jiān)聽的目標(biāo)元素
// 獲取元素 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ù)
目標(biāo)元素的可見性變化時,就會調(diào)用觀察器的回調(diào)函數(shù)callback
。
callback
一般會觸發(fā)兩次。一次是目標(biāo)元素剛剛進(jìn)入視口,另一次是完全離開視口。
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(如果沒傳,則返回默認(rèn)值)
5. IntersectionObserverEntry 對象
上面提到的changes數(shù)組中的每一項都是一個IntersectionObserverEntry 對象(下文簡稱io對象),對象提供目標(biāo)元素的信息,一共有八個屬性,我們打印這個對象:
// 創(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
:目標(biāo)元素的矩形區(qū)域的信息intersectionRatio
:目標(biāo)元素的可見比例,即intersectionRect
占boundingClientRect
的比例,完全可見時為1
,完全不可見時小于等于0
intersectionRect
:目標(biāo)元素與視口(或根元素)的交叉區(qū)域的信息isIntersecting
: 布爾值,目標(biāo)元素與交集觀察者的根節(jié)點是否相交isVisible
: 布爾值,目標(biāo)元素是否可見(該屬性還在試驗階段,不建議在生產(chǎn)環(huán)境中使用)rootBounds
:根元素的矩形區(qū)域的信息,getBoundingClientRect()
方法的返回值,如果沒有根元素(即直接相對于視口滾動),則返回null
target
:被觀察的目標(biāo)元素,是一個 DOM 節(jié)點對象time
:可見性發(fā)生變化的時間,是一個高精度時間戳,單位為毫秒
6. 應(yīng)用
- 預(yù)加載(滾動加載,翻頁加載,無限加載)
- 懶加載(后加載、惰性加載)
- 其它
注意點
IntersectionObserver API 是異步的,不隨著目標(biāo)元素的滾動同步觸發(fā)。
規(guī)格寫明,IntersectionObserver
的實現(xiàn),應(yīng)該采用requestIdleCallback()
,即只有線程空閑下來,才會執(zhí)行觀察器。這意味著,這個觀察器的優(yōu)先級非常低,只在其他任務(wù)執(zhí)行完,瀏覽器有了空閑才會執(zhí)行。
參考鏈接
以上就是交叉觀察器 IntersectionObserver用法詳解的詳細(xì)內(nèi)容,更多關(guān)于交叉觀察器 IntersectionObserver的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
javascript省市區(qū)三級聯(lián)動下拉框菜單實例演示
這篇文章主要為大家詳細(xì)介紹了javascript實現(xiàn)省市區(qū)三級聯(lián)動下拉框菜單很詳細(xì)的代碼,解決了大家實現(xiàn)javascript省市區(qū)三級聯(lián)動下拉框菜單的問題,感興趣的小伙伴們可以參考一下2015-11-11支付寶小程序?qū)崿F(xiàn)類似微信多行輸入功能(思路詳解)
這篇文章主要介紹了支付寶小程序?qū)崿F(xiàn)類似微信多行輸入功能,輸入超過 8 行的時候會出現(xiàn)滾動,這樣做的好處就是輸入框不會直接頂?shù)巾撁孀铐敳?支付寶小程序?qū)崿F(xiàn)多行輸入框:使用textarea多行輸入框?qū)崿F(xiàn),感興趣的朋友一起看看吧2024-02-02利用XMLHTTP傳遞參數(shù)在另一頁面執(zhí)行并刷新本頁
利用XMLHTTP傳遞參數(shù)在另一頁面執(zhí)行并刷新本頁...2006-10-10手機端 HTML5使用photoswipe.js仿微信朋友圈圖片放大效果
這篇文章主要為大家詳細(xì)介紹了移動web HTML5使用photoswipe模仿微信朋友圈圖片放大瀏覽,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-08-08