資訊專欄INFORMATION COLUMN
摘要：允許你追蹤目標(biāo)元素與其祖先元素或視窗的交叉狀態(tài)。此外，盡管只有一部分元素出現(xiàn)在視窗中，哪怕只有一像素，也可以選擇觸發(fā)回調(diào)函數(shù)。即只有線程空閑下來(lái)，才會(huì)執(zhí)行觀察器。
允許你追蹤目標(biāo)元素與其祖先元素或視窗的交叉狀態(tài)。此外，盡管只有一部分元素出現(xiàn)在視窗中，哪怕只有一像素，也可以選擇觸發(fā)回調(diào)函數(shù)。IntersectionObserver 為什么需要它 ？
在我們需要監(jiān)聽目標(biāo)元素是否進(jìn)入視口時(shí)，需要監(jiān)聽scroll事件，大量的計(jì)算會(huì)造成性能問題
IntersectionObserver 怎么解決這個(gè)問題？IntersectionObserver API 是異步的，不隨著目標(biāo)元素的滾動(dòng)同步觸發(fā)。 即只有線程空閑下來(lái)，才會(huì)執(zhí)行觀察器。這意味著，這個(gè)觀察器的優(yōu)先級(jí)非常低，只在其他任務(wù)執(zhí)行完，瀏覽器有了空閑才會(huì)執(zhí)行。
IntersectionObserverEntry 對(duì)象new IntersectionObserver(callback, options)
let observer = new IntersectionObserver((e) => {
let isintersecting = e[0].isIntersecting
console.log(e[0].intersectionRatio)
if (isintersecting) {
console.log("我出來(lái)了");
}else{
console.log("我隱藏了");
}
}, {
root: null
})
// 觀察某個(gè)目標(biāo)元素，一個(gè)觀察者實(shí)例可以觀察任意多個(gè)目標(biāo)元素。
observer.observe(document.querySelector(".scroll-down"))
IntersectionObserverEntry對(duì)象提供目標(biāo)元素的信息，一共有六個(gè)屬性。
{
time：可見性發(fā)生變化的時(shí)間，是一個(gè)高精度時(shí)間戳，單位為毫秒
target：被觀察的目標(biāo)元素，是一個(gè) DOM 節(jié)點(diǎn)對(duì)象
rootBounds：根元素的矩形區(qū)域的信息，getBoundingClientRect()方法的返回值，如果沒有根元素（即直接相對(duì)于視口滾動(dòng)），則返回null
boundingClientRect：目標(biāo)元素的矩形區(qū)域的信息
intersectionRect：目標(biāo)元素與視口（或根元素）的交叉區(qū)域的信息
intersectionRatio：目標(biāo)元素的可見比例，即intersectionRect占boundingClientRect的比例，完全可見時(shí)為1，完全不可見時(shí)小于等于0
}
options 主要有
{
root: null, // 指定與目標(biāo)元素相交的根元素，默認(rèn)null為視口
threshold: [] // [0, 0.5, 1] 當(dāng)目標(biāo)元素和根元素相交的面積占目標(biāo)元素面積的百分比到達(dá)或跨過某些指定的臨界值時(shí)就會(huì)觸發(fā)回調(diào)函數(shù)
Magin：‘’ // "100px 0" 與margin類型寫法，指定與跟元素相交時(shí)的延時(shí)加載
}
實(shí)例方法
observe()
觀察某個(gè)目標(biāo)元素，一個(gè)觀察者實(shí)例可以觀察任意多個(gè)目標(biāo)元素。注意，這里可能有同學(xué)會(huì)問：能不能 delegate？能不能只調(diào)用一次 observe 方法就能觀察一個(gè)頁(yè)面里的所有 img 元素，甚至那些未產(chǎn)生的？答案是不能，這不是事件，沒有冒泡。
unobserve()取消對(duì)某個(gè)目標(biāo)元素的觀察，延遲加載通常都是一次性的，observe 的回調(diào)里應(yīng)該直接調(diào)用 unobserve() 那個(gè)元素.
disconnect()取消觀察所有已觀察的目標(biāo)元素
takeRecords()理解這個(gè)方法需要講點(diǎn)底層的東西：在瀏覽器內(nèi)部，當(dāng)一個(gè)觀察者實(shí)例在某一時(shí)刻觀察到了若干個(gè)相交動(dòng)作時(shí)，它不會(huì)立即執(zhí)行回調(diào)，它會(huì)調(diào)用 window.requestIdleCallback() （目前只有 Chrome 支持）來(lái)異步的執(zhí)行我們指定的回調(diào)函數(shù)，而且還規(guī)定了最大的延遲時(shí)間是 100 毫秒，相當(dāng)于瀏覽器會(huì)執(zhí)行：
requestIdleCallback(() => {
if (entries.length > 0) {
callback(entries, observer)
}
}, {
timeout: 100
})
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/98741.html
摘要：主要用于元素可見性的監(jiān)聽，比傳統(tǒng)通過全局監(jiān)聽事件去判斷可見性無(wú)論是性能還是便利性都要好得多。問題是這種通過監(jiān)聽的方式很容易導(dǎo)致性能問題，或者多多少少會(huì)有些性能損失。 IntersectionObserver主要用于元素可見性的監(jiān)聽，比傳統(tǒng)通過全局監(jiān)聽scroll事件去判斷可見性無(wú)論是性能還是便利性都要好得多。因?yàn)閍pi比較新，存在兼容性問題，好在已經(jīng)有了兼容的polyfill.其基本介...
摘要：用于獲得當(dāng)前元素到定位父級(jí)頂部的距離偏移值。后來(lái)在項(xiàng)目中總會(huì)遇到滾動(dòng)吸頂?shù)男Ч枰獙?shí)現(xiàn)，現(xiàn)在我將我知道的種滾動(dòng)吸頂實(shí)現(xiàn)方式做詳細(xì)介紹。有兼容性問題，在微信瀏覽器某些版本中的值會(huì)為，于是乎也就有了第三種方案的兼容性寫法。修改版預(yù)覽 這篇文章是三天前寫就的，有大佬給我提了一些修改意見，我覺得這個(gè)意見確實(shí)中肯。所以就有了這個(gè)升級(jí)的修改版本。代碼同步更新到 GitHub 了。 修改內(nèi)容如下： 添加...
摘要：同時(shí)，懶加載按需加載概念至關(guān)重要。時(shí)至今日，這些實(shí)現(xiàn)懶加載腳本的代碼仍有學(xué)習(xí)意義。代碼實(shí)戰(zhàn)下面讓我們動(dòng)手實(shí)現(xiàn)一個(gè)按需加載輪子。同樣，對(duì)于組件也可以使用無(wú)狀態(tài)組件函數(shù)式組件實(shí)現(xiàn)這樣無(wú)疑更加簡(jiǎn)潔。 組件化在當(dāng)今前端開發(fā)領(lǐng)域中是一個(gè)非常重要的概念。著名的前端類庫(kù)，比如 React、Vue 等對(duì)此概念都倍加推崇。確實(shí)，組件化復(fù)用性（reusability）和模塊性（modularization...
摘要：同時(shí)，懶加載按需加載概念至關(guān)重要。時(shí)至今日，這些實(shí)現(xiàn)懶加載腳本的代碼仍有學(xué)習(xí)意義。代碼實(shí)戰(zhàn)下面讓我們動(dòng)手實(shí)現(xiàn)一個(gè)按需加載輪子。同樣，對(duì)于組件也可以使用無(wú)狀態(tài)組件函數(shù)式組件實(shí)現(xiàn)這樣無(wú)疑更加簡(jiǎn)潔。 組件化在當(dāng)今前端開發(fā)領(lǐng)域中是一個(gè)非常重要的概念。著名的前端類庫(kù)，比如 React、Vue 等對(duì)此概念都倍加推崇。確實(shí)，組件化復(fù)用性（reusability）和模塊性（modularization...
閱讀 2396·2019-08-30 15:56
閱讀 1053·2019-08-30 15:55
閱讀 3218·2019-08-30 15:44
閱讀 945·2019-08-30 10:53
閱讀 1903·2019-08-29 16:33
閱讀 2511·2019-08-29 16:13
閱讀 731·2019-08-29 12:41
閱讀 889·2019-08-26 13:56
