IntersectionObserver介紹

PAMPANG 發布于2019-08-23 12:34 / 1002人閱讀

摘要：允許你追蹤目標元素與其祖先元素或視窗的交叉狀態。此外，盡管只有一部分元素出現在視窗中，哪怕只有一像素，也可以選擇觸發回調函數。即只有線程空閑下來，才會執行觀察器。

允許你追蹤目標元素與其祖先元素或視窗的交叉狀態。此外，盡管只有一部分元素出現在視窗中，哪怕只有一像素，也可以選擇觸發回調函數。

IntersectionObserver 為什么需要它？

在我們需要監聽目標元素是否進入視口時，需要監聽scroll事件，大量的計算會造成性能問題

IntersectionObserver 怎么解決這個問題？

IntersectionObserver API 是異步的，不隨著目標元素的滾動同步觸發。即只有線程空閑下來，才會執行觀察器。這意味著，這個觀察器的優先級非常低，只在其他任務執行完，瀏覽器有了空閑才會執行。

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
    })
    
    // 觀察某個目標元素，一個觀察者實例可以觀察任意多個目標元素。
    observer.observe(document.querySelector(".scroll-down"))

IntersectionObserverEntry對象提供目標元素的信息，一共有六個屬性。

{
time：可見性發生變化的時間，是一個高精度時間戳，單位為毫秒
target：被觀察的目標元素，是一個 DOM 節點對象
rootBounds：根元素的矩形區域的信息，getBoundingClientRect()方法的返回值，如果沒有根元素（即直接相對于視口滾動），則返回null
boundingClientRect：目標元素的矩形區域的信息
intersectionRect：目標元素與視口（或根元素）的交叉區域的信息
intersectionRatio：目標元素的可見比例，即intersectionRect占boundingClientRect的比例，完全可見時為1，完全不可見時小于等于0   
}

options 主要有

{
    root: null, // 指定與目標元素相交的根元素，默認null為視口
    threshold: [] // [0, 0.5, 1] 當目標元素和根元素相交的面積占目標元素面積的百分比到達或跨過某些指定的臨界值時就會觸發回調函數
    Magin：‘’ // "100px 0" 與margin類型寫法，指定與跟元素相交時的延時加載
}

實例方法 observe()

觀察某個目標元素，一個觀察者實例可以觀察任意多個目標元素。注意，這里可能有同學會問：能不能 delegate？能不能只調用一次 observe 方法就能觀察一個頁面里的所有 img 元素，甚至那些未產生的？答案是不能，這不是事件，沒有冒泡。

unobserve()

取消對某個目標元素的觀察，延遲加載通常都是一次性的，observe 的回調里應該直接調用 unobserve() 那個元素.

disconnect()

取消觀察所有已觀察的目標元素

takeRecords()

理解這個方法需要講點底層的東西：在瀏覽器內部，當一個觀察者實例在某一時刻觀察到了若干個相交動作時，它不會立即執行回調，它會調用 window.requestIdleCallback() （目前只有 Chrome 支持）來異步的執行我們指定的回調函數，而且還規定了最大的延遲時間是 100 毫秒，相當于瀏覽器會執行：

requestIdleCallback(() => {
  if (entries.length > 0) {
    callback(entries, observer)
  }
}, {
  timeout: 100
})

GPU云服務器云服務器 IntersectionObserver 自我介紹平臺介紹相關介紹

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/98741.html

Javascript零碎之IntersectionObserver

摘要：主要用于元素可見性的監聽，比傳統通過全局監聽事件去判斷可見性無論是性能還是便利性都要好得多。問題是這種通過監聽的方式很容易導致性能問題，或者多多少少會有些性能損失。 IntersectionObserver主要用于元素可見性的監聽，比傳統通過全局監聽scroll事件去判斷可見性無論是性能還是便利性都要好得多。因為api比較新，存在兼容性問題，好在已經有了兼容的polyfill.其基本介...

張遷 2019-08-23 18:24 評論0 收藏0
【前端詞典】5 種滾動吸頂實現方式的比較[性能升級版]

摘要：用于獲得當前元素到定位父級頂部的距離偏移值。后來在項目中總會遇到滾動吸頂的效果需要實現，現在我將我知道的種滾動吸頂實現方式做詳細介紹。有兼容性問題，在微信瀏覽器某些版本中的值會為，于是乎也就有了第三種方案的兼容性寫法。修改版預覽這篇文章是三天前寫就的，有大佬給我提了一些修改意見，我覺得這個意見確實中肯。所以就有了這個升級的修改版本。代碼同步更新到 GitHub 了。修改內容如下：添加...

happyfish 2019-05-23 17:31 評論0 收藏0
組件復用那些事兒 - React 實現按需加載輪子

摘要：同時，懶加載按需加載概念至關重要。時至今日，這些實現懶加載腳本的代碼仍有學習意義。代碼實戰下面讓我們動手實現一個按需加載輪子。同樣，對于組件也可以使用無狀態組件函數式組件實現這樣無疑更加簡潔。組件化在當今前端開發領域中是一個非常重要的概念。著名的前端類庫，比如 React、Vue 等對此概念都倍加推崇。確實，組件化復用性（reusability）和模塊性（modularization...

lidashuang 2019-08-22 16:24 評論0 收藏0
組件復用那些事兒 - React 實現按需加載輪子

摘要：同時，懶加載按需加載概念至關重要。時至今日，這些實現懶加載腳本的代碼仍有學習意義。代碼實戰下面讓我們動手實現一個按需加載輪子。同樣，對于組件也可以使用無狀態組件函數式組件實現這樣無疑更加簡潔。組件化在當今前端開發領域中是一個非常重要的概念。著名的前端類庫，比如 React、Vue 等對此概念都倍加推崇。確實，組件化復用性（reusability）和模塊性（modularization...

K_B_Z 2019-08-02 10:14 評論0 收藏0