了解路口觀察者 API

Intersection Observer API 是一種現代 Web API，旨在觀察目標元素與祖先元素或視口的交集的變化。它提供了一種非同步觀察元素與祖先元素或頂級文件視口的交集變化的方法。這對於實現圖像延遲載入、無限滾動或元素進入視圖時觸發動畫特別有用。

主要特性和優點

1. 非同步觀察：與事件監聽器不同，Intersection Observer回呼是非同步執行的，防止它們阻塞主執行緒並確保更好的效能。
2. 高效管理：使用單一 Intersection Observer 實例即可觀察多個元素，減少資源消耗。
3. 閾值配置：開發人員可以定義一組閾值來決定何時觸發回調，從而對何時進行觀察提供細粒度控制。

創建交叉口觀察者

要建立 Intersection Observer，您需要實例化一個新的 IntersectionObserver 物件並傳遞回呼函數和選項物件。這是基本語法：

let observer = new IntersectionObserver(callback, options);

• 回呼函數：只要觀察到的元素與根元素或視窗相交，就會執行此函數。
• 選項物件：該物件配置觀察者的行為。

回呼函數

回呼函數有兩個參數：IntersectionObserverEntry 物件陣列和觀察者本身。

function callback(entries, observer) {
    entries.forEach(entry => {
        // Handle each intersection change
    });
}

選項對象

選項物件可以具有以下屬性：

• root：用作檢查目標可見性的視口的元素。如果未指定，則預設為瀏覽器視窗。
• rootMargin：應用於根邊界框的偏移量。這對於在元素實際處於視圖之前或之後觸發回調非常有用。它接受類似CSS邊距屬性的值（例如，「10px 20px 30px 40px」）。
• threshold：單一數字或數字數組，指示應在目標可見度的百分比下執行觀察者的回調。值為 0.5 表示當目標的 50% 可見時將執行回呼。

用法範例

延遲載入圖片

Intersection Observer API 的常見用例是延遲載入映像。圖像僅在進入視口時才加載，從而減少初始加載時間並節省頻寬。

<img data-src="image.jpg" alt="Lazy Loaded Image">

document.addEventListener("DOMContentLoaded", function() {
    let lazyImages = document.querySelectorAll('img[data-src]');

    let observer = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                let img = entry.target;
                img.src = img.getAttribute('data-src');
                img.removeAttribute('data-src');
                observer.unobserve(img);
            }
        });
    });

    lazyImages.forEach(img => {
        observer.observe(img);
    });
});

無限滾動

另一個用例是實現無限滾動，當使用者滾動到頁面底部附近時會載入更多內容。

<div class="content"></div>
<div class="loader">Loading...</div>

let content = document.querySelector('.content');
let loader = document.querySelector('.loader');

let observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            loadMoreContent();
        }
    });
}, {
    root: null,
    rootMargin: '0px',
    threshold: 1.0
});

observer.observe(loader);

function loadMoreContent() {
    // Fetch and append new content to the content div
}

滾動動畫

您也可以使用 Intersection Observer API 在元素進入檢視時觸發動畫。

<div class="animate-on-scroll">Animate me!</div>

let animateElements = document.querySelectorAll('.animate-on-scroll');

let observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            entry.target.classList.add('animated');
        } else {
            entry.target.classList.remove('animated');
        }
    });
}, {
    root: null,
    rootMargin: '0px',
    threshold: 0.5
});

animateElements.forEach(el => {
    observer.observe(el);
});

進階選項

多重門檻

您可以指定多個閾值來觸發不同可見度的回呼。

let options = {
    root: null,
    rootMargin: '0px',
    threshold: [0, 0.25, 0.5, 0.75, 1]
};

動態根邊距

可以根據不同情況動態調整根邊距。

let options = {
    root: null,
    rootMargin: calculateRootMargin(),
    threshold: 0
};

function calculateRootMargin() {
    // Calculate and return root margin based on conditions
}

Intersection Observer API 提供了一種強大而有效的方法來處理網頁上元素的可見性變化。它提供了具有可自訂閾值和根邊距的細粒度控制，其非同步特性確保它不會阻塞主執行緒。透過利用此 API，開發人員可以實現延遲載入、無限滾動和滾動動畫等功能，從而增強使用者體驗和效能。

以上是了解路口觀察者 API的詳細內容。更多資訊請關注PHP中文網其他相關文章！