JavaScript で画像の遅延読み込みを実装するにはどうすればよいですか?

JavaScript で画像の遅延読み込みを実装するにはどうすればよいですか?

モバイル インターネットの発展に伴い、Web ページ上の画像の数が増加し、ページの読み込み速度が遅くなり、ユーザー エクスペリエンスが低下しています。この問題を解決するために登場したのが画像の遅延読み込み機能です。画像の遅延読み込みとは、ユーザーが画像の位置までスクロールすると、Web ページの読み込み速度を向上させるために画像が再度読み込まれることを意味します。この記事では、JavaScript を使用して画像の遅延読み込みを実装する方法を紹介し、具体的なコード例を示します。

1. まず、遅延ロードされる画像の特定の属性をマークする必要があります。この例では、タグ属性として「data-src」を使用し、この属性に画像の実アドレスを格納します。

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

2. 次に、JavaScript を通じてページ スクロール イベントをリッスンし、画像が表示領域に入ったかどうかを判断する必要があります。

function lazyLoadImages() {
    var lazyImages = document.querySelectorAll('img[data-src]');
    
    lazyImages.forEach(function(img) {
        if(isElementInViewport(img)) {
            img.src = img.getAttribute('data-src');
            img.removeAttribute('data-src');
        }
    });
}

function isElementInViewport(el) {
    var rect = el.getBoundingClientRect();
    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= window.innerHeight &&
        rect.right <= window.innerWidth
    );
}

window.addEventListener('scroll', lazyLoadImages);
window.addEventListener('resize', lazyLoadImages);

3. ブラウザがウィンドウをスクロールまたはサイズ変更すると、scroll および resize イベントがトリガーされます。これら 2 つのイベントを使用して、次のことができます。 lazyLoadImages 関数を呼び出して、画像を決定して読み込みます。
4. 最後に、ページが読み込まれた直後に lazyLoadImages 関数を実行して、最初の画面の表示領域に画像を読み込みます。

window.addEventListener('load', lazyLoadImages);

上記の 4 つの手順により、画像の遅延読み込み機能を実装できます。ユーザーが画像の位置までスクロールすると、画像が自動的に読み込まれるため、ページの読み込み速度が向上します。

概要:
画像の遅延読み込みとは、画像の実アドレスを特定の属性に保存し、ページのスクロールやウィンドウのサイズ変更のイベントをリッスンして画像が表示領域に入ったかどうかを判断することです。 、判定結果に基づいて画像を読み込みます。このテクノロジーは、ユーザー エクスペリエンスを向上させ、サーバーの負荷を軽減するために、モバイル デバイスやネットワーク パフォーマンスが低い環境で特に重要です。

上記は、JavaScript が画像の遅延読み込み機能を実装する方法の概要と、対応するコード例を示しています。お役に立てれば！

以上がJavaScript で画像の遅延読み込みを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。