快捷導(dǎo)航

如何通過IntersectionObserver實現(xiàn)懶加載

更新時間：2023年04月17日 10:20:42 作者：凌晨?||?AmsWait

這篇文章主要介紹了通過IntersectionObserver實現(xiàn)懶加載，本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下

通常懶加載等都會通過監(jiān)聽scroll事件用getBoundingClientRect()來判斷元素位置來決定是否可以開始加載。性能開銷是比較大的，為了節(jié)省性能又需要各種操作去彌補，例如用節(jié)流來減少判斷次數(shù)等。
IntersectionObserver API可以完全省去這些操作，只需要簡單的讀取即可。

點擊查看IntersectionObserver 文檔

示例

new IntersectionObserver(callBack, options);

    let options = {
        root: null, // 相對的根元素，null為視口
        threshold: 1.0 //重疊率 0.0-1.0（完全重疊即完全進入root元素） 重疊率達到要求后觸發(fā)事件 
    },
    callBack = (entries, observer) => { // entries 數(shù)組，包含所有的被觀察者

        entries.forEach(entry => {
            // isIntersecting 即是否重疊
            entry.target.innerText = entry.isIntersecting ? '加載~~~~': '不可見'; 
        })
    },
    observer  = new IntersectionObserver(callBack, options);

    let observedList = document.querySelectorAll('h1');
    observedList.forEach(element => {
        observer.observe(element)
    });

options 配置項

傳遞到 IntersectionObserver() 構(gòu)造函數(shù)的 options 對象，允許您控制觀察者的回調(diào)函數(shù)的被調(diào)用時的環(huán)境。它有以下字段：

root

指定根(root)元素，用于檢查目標(biāo)的可見性。必須是目標(biāo)元素的父級元素。如果未指定或者為null，則默認(rèn)為瀏覽器視窗。

rootMargin

根(root)元素的外邊距。類似于 CSS 中的 margin 屬性，比如 “10px 20px 30px 40px” (top, right, bottom, left)。如果有指定 root 參數(shù)，則 rootMargin 也可以使用百分比來取值。該屬性值是用作 root 元素和 target 發(fā)生交集時候的計算交集的區(qū)域范圍，使用該屬性可以控制 root 元素每一邊的收縮或者擴張。默認(rèn)值為0。

threshold

可以是單一的 number 也可以是 number 數(shù)組，target 元素和 root 元素相交程度達到該值的時候 IntersectionObserver 注冊的回調(diào)函數(shù)將會被執(zhí)行。如果你只是想要探測當(dāng) target 元素的在 root 元素中的可見性超過50%的時候，你可以指定該屬性值為0.5。如果你想要 target 元素在 root 元素的可見程度每多25%就執(zhí)行一次回調(diào)，那么你可以指定一個數(shù)組 [0, 0.25, 0.5, 0.75, 1]。默認(rèn)值是0 (意味著只要有一個 target 像素出現(xiàn)在 root 元素中，回調(diào)函數(shù)將會被執(zhí)行)。該值為1.0含義是當(dāng) target 完全出現(xiàn)在 root 元素中時候回調(diào)才會被執(zhí)行。

Demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            font-size: 24px;
        }
    </style>
</head>
<body>
    <h1>不可見</h1>
    <h4>不可見</h4>
    <h1>不可見</h1>
    <h4>不可見</h4>
    <h1>不可見</h1>
    <h4>不可見</h4>
    <h1>不可見</h1>
    <h4>不可見</h4>
    <h1>不可見</h1>
    <h4>不可見</h4>
    <h1>不可見</h1>
    <h4>不可見</h4>
    <h1>不可見</h1>
    <h4>不可見</h4>
    <h1>不可見</h1>
    <h4>不可見</h4>
    <h1>不可見</h1>
    <h4>不可見</h4>
    <h1>不可見</h1>
    <h4>不可見</h4>
    <h1>不可見</h1>
    <h4>不可見</h4>
    <h1>不可見</h1>
    <h4>不可見</h4>
    <h1>不可見</h1>
    <h4>不可見</h4>
    <h1>不可見</h1>
    <h4>不可見</h4>
    <h1>不可見</h1>
    <h4>不可見</h4>

    <script>
        let options = {
            root: null, // 根元素，null為視口
            threshold: 1.0 //重疊率 0.0-1.0  重疊率達到要求后觸發(fā)事件 
        },
        callBack = (entries, observer) => {
            entries.forEach(entry => {
                entry.target.innerText = entry.isIntersecting ? '測試': '不可見';
            })
        },
        observer  = new IntersectionObserver(callBack, options);

        let observedList = document.querySelectorAll('h1');
        observedList.forEach(element => {
            observer.observe(element)
        });
    </script>
</body>
</html>

到此這篇關(guān)于通過IntersectionObserver實現(xiàn)懶加載的文章就介紹到這了,更多相關(guān)IntersectionObserver懶加載內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: