淺談WebAPI之IntersectionObserver

IntersectionObserver

這是個(gè)還在草案中的API,不過大部分瀏覽器均已實(shí)現(xiàn)(除了IE)。先看下MDN中的介紹:

IntersectionObserver接口提供了一種異步觀察目標(biāo)元素與祖先元素或頂級文檔viewport的交集中的變化的方法。祖先元素與視窗viewport被稱為根(root)。

目標(biāo)元素與視窗

不知大家有沒有發(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ù)callbackoptions

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è)屬性是比較常用的判斷條件:isIntersectingintersectionRatio

IntersectionObserverEntry打印的值

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è),太丑勿噴


IntersectionObserver.gif

總之,這是一個(gè)相當(dāng)方便好用的API!

掘金傳送門:https://juejin.im/post/5d11ced1f265da1b7004b6f7

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,825評論 6 546
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 99,814評論 3 429
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事?!?“怎么了?”我有些...
    開封第一講書人閱讀 178,980評論 0 384
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 64,064評論 1 319
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 72,779評論 6 414
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 56,109評論 1 330
  • 那天,我揣著相機(jī)與錄音,去河邊找鬼。 笑死,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 44,099評論 3 450
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 43,287評論 0 291
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 49,799評論 1 338
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 41,515評論 3 361
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 43,750評論 1 375
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,221評論 5 365
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 44,933評論 3 351
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,327評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,667評論 1 296
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 52,492評論 3 400
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 48,703評論 2 380

推薦閱讀更多精彩內(nèi)容