快捷導(dǎo)航

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

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

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

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

點(diǎn)擊查看IntersectionObserver 文檔

示例

new IntersectionObserver(callBack, options);

    let options = {
        root: null, // 相對(duì)的根元素，null為視口
        threshold: 1.0 //重疊率 0.0-1.0（完全重疊即完全進(jìn)入root元素） 重疊率達(dá)到要求后觸發(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 配置項(xiàng)

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

root

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

rootMargin

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

threshold

可以是單一的 number 也可以是 number 數(shù)組，target 元素和 root 元素相交程度達(dá)到該值的時(shí)候 IntersectionObserver 注冊(cè)的回調(diào)函數(shù)將會(huì)被執(zhí)行。如果你只是想要探測(cè)當(dāng) target 元素的在 root 元素中的可見性超過50%的時(shí)候，你可以指定該屬性值為0.5。如果你想要 target 元素在 root 元素的可見程度每多25%就執(zhí)行一次回調(diào)，那么你可以指定一個(gè)數(shù)組 [0, 0.25, 0.5, 0.75, 1]。默認(rèn)值是0 (意味著只要有一個(gè) target 像素出現(xiàn)在 root 元素中，回調(diào)函數(shù)將會(huì)被執(zhí)行)。該值為1.0含義是當(dāng) target 完全出現(xiàn)在 root 元素中時(shí)候回調(diào)才會(huì)被執(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  重疊率達(dá)到要求后觸發(fā)事件 
        },
        callBack = (entries, observer) => {
            entries.forEach(entry => {
                entry.target.innerText = entry.isIntersecting ? '測(cè)試': '不可見';
            })
        },
        observer  = new IntersectionObserver(callBack, options);

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

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

您可能感興趣的文章: