IntersectionObserver監(jiān)聽容器元素

DandJ 發(fā)布于2019-08-26 11:39 / 1511人閱讀

摘要：是已經(jīng)支持的，用來檢測(cè)目標(biāo)元素是否處于容器之中。之前我們?cè)谧鰬屑虞d的時(shí)候，通常都是監(jiān)聽瀏覽器事件，然后根據(jù)元素位置是否處于可視窗口來做的，這種方式有個(gè)弊端就是，頁面在監(jiān)聽滾動(dòng)的時(shí)候會(huì)導(dǎo)致頁面加載不流暢。

IntersectionObserver是Chrome 51+已經(jīng)支持的API，用來檢測(cè)目標(biāo)元素是否處于root容器之中。
之前我們?cè)谧鰬屑虞d的時(shí)候，通常都是監(jiān)聽瀏覽器scroll事件，然后根據(jù)元素位置是否處于可視窗口來做的，這種方式有個(gè)弊端就是，頁面在監(jiān)聽scroll滾動(dòng)的時(shí)候會(huì)導(dǎo)致頁面加載不流暢。
使用IntersectionObserverAPI就可以避免這種情況，達(dá)到平滑加載的目的，并且可以根據(jù)threshold來定義回掉函數(shù)在什么時(shí)候觸發(fā)，更加的簡(jiǎn)單準(zhǔn)確。




    
    Document

IntersectionObserver有observe,unobserve,disconnect等三個(gè)方法，分別指綁定觀察對(duì)象、停止觀測(cè)、關(guān)閉觀察器。
IntersectionObserver(callbakc,opts)接受兩個(gè)參數(shù),第一個(gè)參數(shù)為回調(diào)函數(shù),在檢測(cè)目標(biāo)根據(jù)opts里面的threshold內(nèi)容來觸發(fā)。

容器云 IntersectionObserver 配置監(jiān)聽實(shí)現(xiàn)監(jiān)聽網(wǎng)絡(luò)監(jiān)聽

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/107296.html

相關(guān)文章

圖片懶加載的前世今生

摘要：配置項(xiàng)配置項(xiàng)中的參數(shù)有以下三個(gè)所監(jiān)聽對(duì)象的具體祖先元素，默認(rèn)是計(jì)算交叉狀態(tài)時(shí)，將附加到祖先元素上，從而有效的擴(kuò)大或者縮小祖先元素判定區(qū)域設(shè)置一系列的閾值，當(dāng)交叉狀態(tài)達(dá)到閾值時(shí)，會(huì)觸發(fā)回調(diào)函數(shù)。一、前言 ??通常情況下，HTML 中的圖片資源會(huì)自上而下依次加載，而部分圖片只有在用戶向下滾動(dòng)頁面的場(chǎng)景下才能被看見，否則這部分圖片的流量就白白浪費(fèi)了。 ??所以，對(duì)于那些含有大量圖片資源的網(wǎng)...

zhaot 2019-08-23 16:13 評(píng)論0 收藏0
IntersectionObserve初試

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

LucasTwilight 2019-08-23 15:34 評(píng)論0 收藏0
Javascript零碎之IntersectionObserver

摘要：主要用于元素可見性的監(jiān)聽，比傳統(tǒng)通過全局監(jiān)聽事件去判斷可見性無論是性能還是便利性都要好得多。問題是這種通過監(jiān)聽的方式很容易導(dǎo)致性能問題，或者多多少少會(huì)有些性能損失。 IntersectionObserver主要用于元素可見性的監(jiān)聽，比傳統(tǒng)通過全局監(jiān)聽scroll事件去判斷可見性無論是性能還是便利性都要好得多。因?yàn)閍pi比較新，存在兼容性問題，好在已經(jīng)有了兼容的polyfill.其基本介...

張遷 2019-08-23 18:24 評(píng)論0 收藏0
【前端詞典】5 種滾動(dòng)吸頂實(shí)現(xiàn)方式的比較[性能升級(jí)版]

摘要：用于獲得當(dāng)前元素到定位父級(jí)頂部的距離偏移值。后來在項(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)容如下：添加...

happyfish 2019-05-23 17:31 評(píng)論0 收藏0
如何實(shí)現(xiàn)元素曝光上報(bào)

摘要：進(jìn)行數(shù)據(jù)上報(bào)的時(shí)候，經(jīng)常會(huì)遇到列表數(shù)據(jù)曝光上報(bào)的問題，只對(duì)在當(dāng)前可視范圍內(nèi)的數(shù)據(jù)內(nèi)容進(jìn)行曝光上報(bào)，而對(duì)于未在可視范圍內(nèi)的數(shù)據(jù)不進(jìn)行曝光上報(bào)，等待用戶滾動(dòng)頁面或者區(qū)域使元素出現(xiàn)在可視范圍內(nèi)時(shí)才進(jìn)行曝光上報(bào)。進(jìn)行數(shù)據(jù)上報(bào)的時(shí)候，經(jīng)常會(huì)遇到列表數(shù)據(jù)曝光上報(bào)的問題，只對(duì)在當(dāng)前可視范圍內(nèi)的數(shù)據(jù)內(nèi)容進(jìn)行曝光上報(bào)，而對(duì)于未在可視范圍內(nèi)的數(shù)據(jù)不進(jìn)行曝光上報(bào)，等待用戶滾動(dòng)頁面或者區(qū)域使元素出現(xiàn)在可視范...

VincentFF 2019-08-26 10:35 評(píng)論0 收藏0