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