Javascript零碎之IntersectionObserver

張遷發布于2019-08-23 18:24 / 1616人閱讀

摘要：主要用于元素可見性的監聽，比傳統通過全局監聽事件去判斷可見性無論是性能還是便利性都要好得多。問題是這種通過監聽的方式很容易導致性能問題，或者多多少少會有些性能損失。

IntersectionObserver主要用于元素可見性的監聽，比傳統通過全局監聽scroll事件去判斷可見性無論是性能還是便利性都要好得多。因為api比較新，存在兼容性問題，好在已經有了兼容的polyfill.其基本介紹和使用方式都可以在該polyfill對應網站上看到。這里主要通過例子的形式，說明其實用的場景。

圖片懶加載 之前的方式

以前我們實現圖片懶加載的原理是這樣的：

window.addEventListener("scroll", lazyload);
function lazyload() {
    const imgs = document.querySelector(".img");
    const innerHeight = util.innerHeight();
    const scrollTop = util.scrollTop();

    imgs.forEach((img) => {
        const imgOffsetH = util.getPosition(img).top;

        // 距離頁面頂部的距離 <= 視窗高 + 往上滾進去的距離
        if(imgOffsetH <= innerHeight + scrollTop) {
            img.src = img.getAttribute("data-src");
        }
    })
}

條件是:距離頁面頂部的距離 <= 視窗高 + 往上滾進去的距離，即算做圖片可見了才加載它。問題是這種通過監聽scroll的方式很容易導致性能問題，或者多多少少會有些性能損失。

IntersectionObserver的方式

const io = new IntersectionObserver((entrys) => {
    entrys.forEach((img) => {
        if(!img.isIntersecting) return;
        img.src = img.getAttribute("data-src");
        io.unobserve(img);
    })
}, {
      //即滾動到距離底部50px時開始算交互區
       rootMargin:"0px 0px 50px 0px"
})
imgs.forEach((img) => {
    io.observe(img);
})

非常的清晰和簡單，而且由于是原生的功能，不會引起性能損耗。這里的rootMargin參數非常好用，因為一般情況下的交互條件都需要添加一定的閾值，以實現更優雅和流暢的體驗，而通過rootMargin能非常簡單的實現這點。

完整示例請參考lazyload.html

滾動分頁 以前的方式

通過判斷滾動是否到底部，即視窗高＋往上滾進去的距離>= 頁面高，來作為加載新的一頁的條件:

window.addEventListener("scroll", () => {
    const innerHeight = util.innerHeight();
    const scrollTop = util.scrollTop(); 
    const scrollHeight = util.scrollHeight();
    // 滾動到距離底部50px
    if(innerHeight + scrollTop >= scrollHeight - 50) {
        loadMore();
    }
});

IntersectionObserver的方式

在最底部設置一個加載更多的標記器，監聽它是否出現，作為加載新頁的條件:

const io = new IntersectionObserver((entrys) => {
    entrys.forEach((entry) => {
        if(!entry.isIntersecting) return;
        loadMore();
    })
}, {
    rootMargin:"0px 0px 50px 0px"
})
//監聽最底部的loadmore是否出現
const lMore = document.querySelector(".load-more");
io.observe(lMore);

在性能上仍然更勝一籌，而且不必每次都去判斷視窗高、滾進去的距離等等，將以往很麻煩的事情變得簡單而快捷。

完整示例請參考paging.html

通過上面的兩個例子，基本能了解IntersectionObserver的功能實用場景，即監聽元素的出現，實現懶加載(可以是圖片、模版、甚至組件等等)、元素進出動畫、分頁等各種形式的功能。這對優化整個頁面的性能還是非常有幫助的，所以在日常的項目中還是很值得嘗試。

本文收錄在個人的Github上https://github.com/kekobin/bl... ,覺得有幫助的，歡迎start哈。支持原創，未經本人同意，請勿轉載！

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

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

Javascript零碎之各種寬高屬性及應用

摘要：一掛在上的上最常用的只有其中，永遠都是窗口的大小，跟隨窗口變化而變化。這個是距該元素最近的不為的祖先元素，如果沒有則指向元素。在Javascript的開發過程中，我們總會看到類似如下的邊界條件判斷(懶加載)： const scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.b...

DevYK 2019-08-23 18:21 評論0 收藏0
圖片懶加載的前世今生

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

zhaot 2019-08-23 16:13 評論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