IntersectionObserver
這是個(gè)還在草案中的API,不過大部分瀏覽器均已實(shí)現(xiàn)(除了IE)。先看下MDN中的介紹:
IntersectionObserver接口提供了一種異步觀察目標(biāo)元素與祖先元素或頂級文檔viewport的交集中的變化的方法。祖先元素與視窗viewport被稱為根(root)。
不知大家有沒有發(fā)現(xiàn)隨著網(wǎng)頁發(fā)展,對檢測某個(gè)(些)元素是否出現(xiàn)在可視窗相關(guān)的需求越來越多了?比如:
- 當(dāng)頁面滾動(dòng)時(shí),懶加載圖片或其他內(nèi)容。
- 實(shí)現(xiàn)“可無限滾動(dòng)”網(wǎng)站,也就是當(dāng)用戶滾動(dòng)網(wǎng)頁時(shí)直接加載更多內(nèi)容,無需翻頁。
- 對某些元素進(jìn)行埋點(diǎn)曝光
- 滾動(dòng)到相應(yīng)區(qū)域來執(zhí)行相應(yīng)動(dòng)畫或其他任務(wù)。
一直以來,檢測元素的可視狀態(tài)或者兩個(gè)元素的相對可視狀態(tài)都不是件容易事,大部分解決辦法并不完全可靠,實(shí)現(xiàn)方式很丑陋,也極易拖慢整個(gè)網(wǎng)站的性能。
IntersectionObserver正因此而生
API解讀:
1.用法
是以new
的形式聲明一個(gè)對象,接收兩個(gè)參數(shù)callback
和options
const io = new IntersectionObserver(callback, options)
io.observe(DOM)
const options = {
root: null,
rootMargin: 0,
thresholds: 1,
}
const io = new IntersectionObserver(entries => {
console.log(entries)
// Do something
}, options)
2.callback
callback是添加監(jiān)聽后,當(dāng)監(jiān)聽目標(biāo)發(fā)生滾動(dòng)變化時(shí)觸發(fā)的回調(diào)函數(shù)。接收一個(gè)參數(shù)entries,即IntersectionObserverEntry實(shí)例。描述了目標(biāo)元素與root的交叉狀態(tài)。具體參數(shù)如下:
屬性 | 說明 |
---|---|
boundingClientRect | 返回包含目標(biāo)元素的邊界信息,返回結(jié)果與element.getBoundingClientRect() 相同 |
intersectionRatio | 返回目標(biāo)元素出現(xiàn)在可視區(qū)的比例 |
intersectionRect | 用來描述root和目標(biāo)元素的相交區(qū)域 |
isIntersecting | 返回一個(gè)布爾值,下列兩種操作均會(huì)觸發(fā)callback:1. 如果目標(biāo)元素出現(xiàn)在root可視區(qū),返回true。2. 如果從root可視區(qū)消失,返回false |
rootBounds | 用來描述交叉區(qū)域觀察者(intersection observer)中的根. |
target | 目標(biāo)元素:與根出現(xiàn)相交區(qū)域改變的元素 (Element) |
time | 返回一個(gè)記錄從 IntersectionObserver 的時(shí)間原點(diǎn)到交叉被觸發(fā)的時(shí)間的時(shí)間戳 |
表格中加粗的兩個(gè)屬性是比較常用的判斷條件:isIntersecting和intersectionRatio
3.options
options是一個(gè)對象,用來配置參數(shù),也可以不填。共有三個(gè)屬性,具體如下:
屬性 | 說明 |
---|---|
root | 所監(jiān)聽對象的具體祖先元素。如果未傳入值或值為null ,則默認(rèn)使用頂級文檔的視窗(一般為html)。 |
rootMargin | 計(jì)算交叉時(shí)添加到根(root)邊界盒bounding box的矩形偏移量, 可以有效的縮小或擴(kuò)大根的判定范圍從而滿足計(jì)算需要。所有的偏移量均可用像素(px )或百分比(% )來表達(dá), 默認(rèn)值為"0px 0px 0px 0px"。 |
threshold | 一個(gè)包含閾值的列表, 按升序排列, 列表中的每個(gè)閾值都是監(jiān)聽對象的交叉區(qū)域與邊界區(qū)域的比率。當(dāng)監(jiān)聽對象的任何閾值被越過時(shí),都會(huì)觸發(fā)callback。默認(rèn)值為0。 |
4.方法
介紹了這么多配置項(xiàng)及參數(shù),差點(diǎn)忘了最重要的,IntersectionObserver有哪些方法?
如果要監(jiān)聽某些元素,則必須要對該元素執(zhí)行一下observe
方法 | 說明 |
---|---|
observe() | 開始監(jiān)聽一個(gè)目標(biāo)元素 |
unobserve() | 停止監(jiān)聽特定目標(biāo)元素 |
takeRecords() | 返回所有觀察目標(biāo)的IntersectionObserverEntry對象數(shù)組 |
disconnect() | 使IntersectionObserver對象停止全部監(jiān)聽工作 |
應(yīng)用:
1.圖片懶加載
const imgList = [...document.querySelectorAll('img')]
var io = new IntersectionObserver((entries) =>{
entries.forEach(item => {
// isIntersecting是一個(gè)Boolean值,判斷目標(biāo)元素當(dāng)前是否可見
if (item.isIntersecting) {
item.target.src = item.target.dataset.src
// 圖片加載后即停止監(jiān)聽該元素
io.unobserve(item.target)
}
})
}, {
root: document.querySelector('.root')
})
// observe遍歷監(jiān)聽所有img節(jié)點(diǎn)
imgList.forEach(img => io.observe(img))
2.埋點(diǎn)曝光
假如有個(gè)需求,對一個(gè)頁面中的特定元素,只有在其完全顯示在可視區(qū)內(nèi)時(shí)進(jìn)行埋點(diǎn)曝光。
const boxList = [...document.querySelectorAll('.box')]
var io = new IntersectionObserver((entries) =>{
entries.forEach(item => {
// intersectionRatio === 1說明該元素完全暴露出來,符合業(yè)務(wù)需求
if (item.intersectionRatio === 1) {
// 。。。 埋點(diǎn)曝光代碼
io.unobserve(item.target)
}
})
}, {
root: null,
threshold: 1, // 閥值設(shè)為1,當(dāng)只有比例達(dá)到1時(shí)才觸發(fā)回調(diào)函數(shù)
})
// observe遍歷監(jiān)聽所有box節(jié)點(diǎn)
boxList.forEach(box => io.observe(box))
3.滾動(dòng)動(dòng)畫
用上面的例子隨便寫了一個(gè),太丑勿噴
總之,這是一個(gè)相當(dāng)方便好用的API!