Intersection Observer API について

Intersection Observer API は、ターゲット要素と祖先要素またはビューポートの交差の変化を監視するように設計された最新の Web API です。これは、要素と祖先要素、またはトップレベル ドキュメントのビューポートとの交差部分の変更を非同期的に観察する方法を提供します。これは、画像の遅延読み込み、無限スクロール、要素が表示されたときのアニメーションのトリガーを実装する場合に特に役立ちます。

主な機能と利点

1. 非同期監視: イベント リスナーとは異なり、Intersection Observer コールバックは非同期で実行されるため、メイン スレッドのブロックを防ぎ、パフォーマンスの向上を保証します。
2. 効率的な管理: 単一の Intersection Observer インスタンスで複数の要素を観察できるため、リソースの消費が削減されます。
3. しきい値設定: 開発者は一連のしきい値を定義してコールバックをトリガーするタイミングを決定し、いつ観測を行うかをきめ細かく制御できます。

交差点オブザーバーの作成

Intersection Observer を作成するには、新しい IntersectionObserver オブジェクトをインスタンス化し、コールバック関数とオプション オブジェクトを渡す必要があります。基本的な構文は次のとおりです:

let observer = new IntersectionObserver(callback, options);

• コールバック関数: この関数は、観察された要素がルート要素またはビューポートと交差するたびに実行されます。
• オプション オブジェクト: このオブジェクトはオブザーバーの動作を構成します。

コールバック関数

コールバック関数は、IntersectionObserverEntry オブジェクトの配列とオブザーバー自体の 2 つの引数を取ります。

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 の一般的な使用例の 1 つは、画像の遅延読み込みです。画像はビューポートに入ったときにのみ読み込まれるため、初期読み込み時間が短縮され、帯域幅が節約されます。

<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);
    });
});

無限スクロール

もう 1 つの使用例は、ユーザーがページの下部付近をスクロールすると、より多くのコンテンツが読み込まれる無限スクロールの実装です。

<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 は、Web ページ上の要素の可視性の変更を処理する強力かつ効率的な方法を提供します。カスタマイズ可能なしきい値とルート マージンによるきめ細かい制御を提供し、非同期の性質によりメイン スレッドをブロックしません。この API を活用することで、開発者は遅延読み込み、無限スクロール、スクロール時のアニメーションなどの機能を実装し、ユーザー エクスペリエンスとパフォーマンスを向上させることができます。

以上がIntersection Observer API についての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。