HTML、CSS、jQuery を使用して画像の遅延読み込みのためのスクロール トリガー技術を実装する方法

HTML、CSS、および jQuery を使用して、画像の遅延読み込みのためのスクロール トリガー手法を実装する方法

Web 開発では、画像の読み込みは一般的なパフォーマンスの問題です。一度に読み込む画像が多すぎると、特にモバイル デバイスでページの読み込み速度に大きな影響が生じます。この問題を解決するには、画像の遅延読み込みテクノロジを使用できます。

画像の遅延読み込みは、画像の読み込みを遅らせる方法です。つまり、最初にすべての画像を読み込むのではなく、ページが表示領域までスクロールしたときに画像を読み込みます。このようにして、ページの読み込み時間を短縮し、ユーザー エクスペリエンスを向上させることができます。

以下は、HTML、CSS、および jQuery を使用して、画像の遅延読み込みのためのスクロール トリガー手法を実装するための具体的な手順です。

ステップ 1: HTML 構造を作成する

まず、遅延ロードする必要がある画像要素を含む HTML 構造を準備する必要があります。たとえば、複数の <img alt="HTML、CSS、jQuery を使用して画像の遅延読み込みのためのスクロール トリガー技術を実装する方法" > タグを含むコンテナを使用できます。各 <img alt="HTML、CSS、jQuery を使用して画像の遅延読み込みのためのスクロール トリガー技術を実装する方法" > タグには、URL を保存するための data-src 属性があります。画像の。

<div class="image-container">
  <img data-src="image1.jpg" alt="Image 1">
  <img data-src="image2.jpg" alt="Image 2">
  <img data-src="image3.jpg" alt="Image 3">
  ...
</div>

ステップ 2: CSS スタイルを追加する

次に、いくつかの CSS スタイルをコンテナー要素と画像要素に追加して、ページがスクロールするときの視覚効果を向上させます。 CSS を通じて画像要素のデフォルトのプレースホルダー スタイルを設定し、スクロールがトリガーされたときに実際の画像を適用できます。

.image-container {
  width: 100%;
  height: 100vh;
  overflow: auto;
}

.image-container img {
  display: block;
  width: 100%;
  height: auto;
  background-color: #eee;
}

ステップ 3: JavaScript コードを作成する

最後に、jQuery を使用して、画像の遅延読み込みのスクロール トリガーを実装する JavaScript コードを作成する必要があります。 $(window).scroll() イベントを使用して、ページのスクロールをリッスンし、要素が表示されているときに画像を読み込むことができます。

$(window).scroll(function() {
  $('.image-container img').each(function() {
    var imagePos = $(this).offset().top;
    var windowHeight = $(window).height();
    var scrollPos = $(window).scrollTop();

    if (imagePos < scrollPos + windowHeight) {
      $(this).attr('src', $(this).data('src'));
    }
  });
});

このコードでは、まずページの上部を基準とした各画像要素の位置 (imagePos) を取得し、次にウィンドウの高さ (windowHeight) を取得します。 ) とスクロール位置 (scrollPos)。画像要素の位置がスクロール位置にウィンドウの高さを加えたものより小さい場合、つまり画像要素が表示されている場合は、data-src 属性の値を src## に割り当てます。 # 属性を使用して画像をロードします。

以上がHTML、CSS、jQuery を使用して画像の遅延読み込みのためのスクロール トリガー技術を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。