JavaScriptによる遅延読み込み機能の実装

JavaScript に基づいた遅延読み込み機能の実装

遅延読み込みは、ページの読み込み速度とユーザー エクスペリエンスを向上させるために設計された、一般的に使用されるフロントエンド最適化テクノロジです。遅延読み込みにより、ページ内の特定のリソース (画像、ビデオ、テキストなど) は、ユーザーがそれらを必要とするか、閲覧しようとするまで遅延させることができるため、最初の読み込み時のネットワーク リクエストとページの読み込みが軽減されます。

この記事では、JavaScript を使用して遅延読み込み機能を実装する方法とコード例を紹介します。

1. 遅延読み込みの原則

遅延読み込みの原則は、ページ スクロール イベントまたはその他のインタラクティブな動作をリッスンすることです。ページが特定の位置にスクロールするとき、またはユーザーは、リソースをその場所にロードしてから、リソースをロードする操作を行います。

2. 遅延読み込みを実装する手順

2.1 まず、遅延読み込みが必要な要素に特定の識別子を追加する必要があります。クラス属性やデータ属性などにすることができます。たとえば、遅延ロードする必要があるイメージに「lazy」というクラス属性を追加します。

src 属性はプレースホルダー画像です。 data-src 属性は実際のピクチャ アドレスです。

2.2 ページが読み込まれた後、JavaScript を使用して遅延読み込み識別子を持つすべての要素を取得し、スクロール イベントをバインドします。

<script></script>

document.addEventListener("DOMContentLoaded", function() {
  var lazyImages = document.querySelectorAll(".lazy");

  // 绑定滚动事件
  window.addEventListener("scroll", lazyLoad);
  window.addEventListener("resize", lazyLoad);
  
  // 加载初始屏幕可见区域内的图片
  lazyLoad();
  
  function lazyLoad() {
    lazyImages.forEach(function(img) {
      if (isInViewport(img)) {
        img.src = img.getAttribute("data-src");
        img.classList.remove("lazy");
      }
    });

    // 删除滚动事件绑定，减少性能消耗
    if (lazyImages.length === 0) {
      window.removeEventListener("scroll", lazyLoad);
      window.removeEventListener("resize", lazyLoad);
    }
  }

  // 检查元素是否在可视区域内
  function isInViewport(element) {
    var rect = element.getBoundingClientRect();
    return (
      rect.bottom >= 0 &&
      rect.right >= 0 &&
      rect.top <= (window.innerHeight || document.documentElement.clientHeight) &&
      rect.left <= (window.innerWidth || document.documentElement.clientWidth)
    );
  }

});

3. 遅延読み込み効果をテストします

上記のコードでは、2 つのイベント リスナー (スクロールとサイズ変更) を使用して、ページのスクロールとウィンドウ サイズの変更を監視します。スクロールやウィンドウ サイズの変更を検出するたびに、lazyLoad 関数が呼び出されます。

lazyLoad 関数は、すべての遅延読み込みイメージを走査し、それらが表示領域内にあるかどうかを確認します。そうであれば、 data-src 属性を src に割り当て、つまり実際のイメージをロードし、クラス属性を削除します。怠け者。上記の isInViewport 関数を使用して、要素が表示領域内にあるかどうかを判断します。

概要

遅延読み込みは非常に実用的なフロントエンド テクノロジであり、Web ページのパフォーマンスを向上させるだけでなく、ユーザー エクスペリエンスも向上します。 JavaScript を介して遅延読み込み機能を実装すると、ページの読み込み時間とネットワーク リクエストを大幅に削減できます。

この記事が遅延読み込みの実装方法を理解するのに役立ち、独自のプロジェクトのニーズに応じて対応する修正や最適化を行うことができることを願っています。遅延読み込みテクニックを使用して良い結果が得られることを願っています。

コードサンプルが完成しました。

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