IntersectionObserver監聽容器元素

DandJ 發布于2019-08-26 11:39 / 1502人閱讀

摘要：是已經支持的，用來檢測目標元素是否處于容器之中。之前我們在做懶加載的時候，通常都是監聽瀏覽器事件，然后根據元素位置是否處于可視窗口來做的，這種方式有個弊端就是，頁面在監聽滾動的時候會導致頁面加載不流暢。

IntersectionObserver是Chrome 51+已經支持的API，用來檢測目標元素是否處于root容器之中。
之前我們在做懶加載的時候，通常都是監聽瀏覽器scroll事件，然后根據元素位置是否處于可視窗口來做的，這種方式有個弊端就是，頁面在監聽scroll滾動的時候會導致頁面加載不流暢。
使用IntersectionObserverAPI就可以避免這種情況，達到平滑加載的目的，并且可以根據threshold來定義回掉函數在什么時候觸發，更加的簡單準確。




    
    Document

IntersectionObserver有observe,unobserve,disconnect等三個方法，分別指綁定觀察對象、停止觀測、關閉觀察器。
IntersectionObserver(callbakc,opts)接受兩個參數,第一個參數為回調函數,在檢測目標根據opts里面的threshold內容來觸發。

容器云 IntersectionObserver 配置監聽實現監聽網絡監聽

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

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

圖片懶加載的前世今生

摘要：配置項配置項中的參數有以下三個所監聽對象的具體祖先元素，默認是計算交叉狀態時，將附加到祖先元素上，從而有效的擴大或者縮小祖先元素判定區域設置一系列的閾值，當交叉狀態達到閾值時，會觸發回調函數。一、前言 ??通常情況下，HTML 中的圖片資源會自上而下依次加載，而部分圖片只有在用戶向下滾動頁面的場景下才能被看見，否則這部分圖片的流量就白白浪費了。 ??所以，對于那些含有大量圖片資源的網...

zhaot 2019-08-23 16:13 評論0 收藏0
IntersectionObserve初試

摘要：構造函數調用時，需要給它傳一個回調函數。當監聽的元素進入可視區域或者從可視區域離開時，回調函數就會被調用。構造函數的返回值是一個觀察器實例。它是一個數組，每個成員都是一個門檻值，默認為，即交叉比例達到時觸發回調函數。 IntersectionObserve這個API，可能知道的人并不多(我也是最近才知道...)，這個API可以很方便的監聽元素是否進入了可視區域。 * { marg...

LucasTwilight 2019-08-23 15:34 評論0 收藏0
Javascript零碎之IntersectionObserver

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

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

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

happyfish 2019-05-23 17:31 評論0 收藏0
如何實現元素曝光上報

摘要：進行數據上報的時候，經常會遇到列表數據曝光上報的問題，只對在當前可視范圍內的數據內容進行曝光上報，而對于未在可視范圍內的數據不進行曝光上報，等待用戶滾動頁面或者區域使元素出現在可視范圍內時才進行曝光上報。進行數據上報的時候，經常會遇到列表數據曝光上報的問題，只對在當前可視范圍內的數據內容進行曝光上報，而對于未在可視范圍內的數據不進行曝光上報，等待用戶滾動頁面或者區域使元素出現在可視范...

VincentFF 2019-08-26 10:35 評論0 收藏0