CSS プロパティを使用してレスポンシブ画像の遅延読み込みを実装する方法

CSS プロパティを使用してレスポンシブ画像の遅延読み込みを実装する方法

Web 開発では、特にモバイル上で、大量の画像を読み込む必要がある状況によく遭遇します。デバイス。ページの読み込み速度とユーザー エクスペリエンスを向上させるために、画像の遅延読み込みが一般的な最適化方法になっています。

遅延読み込みとは、ページが読み込まれるときに、ページ全体のすべての画像を読み込むのではなく、表示領域内の画像のみが読み込まれることを意味します。これにより、初期読み込みに必要な時間が大幅に短縮され、帯域幅の不必要な浪費が回避されます。

この記事では、CSS プロパティを使用して、さまざまな画面サイズやデバイスに適用できるレスポンシブ画像の遅延読み込みを実現する方法を紹介します。

まず、HTML で遅延ロードする必要がある画像を定義する必要があります。ここでは、<img class="lazy-image lazy" src="/static/imghw/default1.png" data-src="image.jpg" alt="CSS プロパティを使用してレスポンシブ画像の遅延読み込みを実装する方法" > 要素を使用し、カスタム属性 data-src を設定して、画像の実際の URL を保存します。

<img class="lazy-image lazy" src="/static/imghw/default1.png" data-src="image.jpg" data- alt="Image">

次に、初期画像を非表示にし、background-size プロパティを使用して画像の背景画像を設定する CSS スタイルを記述する必要があります。

.lazy-image {
  background-image: url(placeholder.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

上記のコードの placeholder.jpg は、実際の画像が読み込まれるまで表示するために使用されるプレースホルダー画像です。

次に、CSS プロパティ @media を使用して、さまざまな画面サイズに応じたさまざまなスタイルを定義します。

/* 对于大屏幕设备，立即加载图像 */
@media screen and (min-width: 1024px) {
  .lazy-image {
    background-image: none;
  }
}

/* 对于小屏幕设备，延迟加载图像 */
@media screen and (max-width: 1023px) {
  .lazy-image {
    visibility: hidden;
  }
  
  .lazy-image[data-src] {
    visibility: visible;
  }
}

上記のコードでは、@media ディレクティブを使用して、画面の幅を 1024px 以上と 1024px 未満の 2 つの範囲に分割します。大画面デバイスの場合は、画像をすぐにロードし、background-image を none に設定します。小さな画面デバイスの場合、.lazy-image の visibility 属性を hidden に設定し、data-src 属性も設定します。 .lazy-image 要素は、visibility 属性を visible に設定し、画像の遅延読み込みを実現できるようにします。

最後に、JavaScript を使用して実際に画像を読み込む必要があります。

document.addEventListener("DOMContentLoaded", function() {
  const lazyImages = document.querySelectorAll(".lazy-image");

  const lazyLoad = function() {
    lazyImages.forEach(function(img) {
      if (img.getBoundingClientRect().top <= window.innerHeight && img.hasAttribute("data-src")) {
        img.setAttribute("src", img.getAttribute("data-src"));
        img.removeAttribute("data-src");
      }
    });
  };

  window.addEventListener("scroll", lazyLoad);
  window.addEventListener("resize", lazyLoad);
  window.addEventListener("orientationchange", lazyLoad);
});

上記のコードでは、document.querySelectorAll を使用して .lazy-image クラスのすべての要素を取得し、lazyLoad を定義します。画像が可視領域内にあるかどうかを判断し、可視領域内にある場合は画像をロードする関数。

最後に、lazyLoad 関数をブラウザのスクロール、ウィンドウ サイズ変更、画面方向変更イベントにバインドして、ページがスクロールまたはサイズ変更されたときに読み込み関数がトリガーされるようにします。

上記は、CSS プロパティを使用して応答性の高い画像の遅延読み込みを実装する方法と対応するコード例です。この方法により、Web ページの読み込み速度を最適化し、ユーザー エクスペリエンスを向上させ、帯域幅の不必要な浪費を回避できます。

以上がCSS プロパティを使用してレスポンシブ画像の遅延読み込みを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。