HTML、CSS、jQuery を使用して画像の遅延読み込みのための高度なテクニックを実装する方法

HTML、CSS、jQuery を使用して画像の遅延読み込みのための高度なテクニックを実装する方法

遅延読み込みテクノロジ (Lazy Loading) は、パフォーマンスを向上させるための技術的手段です。多くの画像を含む Web ページに特に適しています。 HTML、CSS、jQuery を使用すると、画像の遅延読み込みを簡単に実装して、Web ページの読み込みを高速化し、ユーザー エクスペリエンスを向上させることができます。この記事では、これら 3 つのテクノロジーを使用して画像の遅延読み込みのための高度なテクニックを実装する方法を紹介し、具体的なコード例を示します。

1. HTML の準備
HTML では、遅延ロードする必要がある各画像の src 属性をカスタムの data-src 属性に置き換える必要があります。同時に、画像のプログレッシブ読み込み効果を実現するために、プレースホルダーを設定できます。

<img data-src="path/to/image.jpg" src="path/to/placeholder.jpg" alt="image">

2. CSS スタイルの設定
画像が読み込まれる前にプレースホルダー画像の表示を維持するには、CSS を使用して img 要素を設定する必要があります。同時に、プログレッシブローディング効果を実現するために、トランジション効果を設定することもできます。

img {
  width: 100%;
  height: auto;
  max-width: 100%;
  opacity: 0;
  transition: opacity 0.3s ease-in;
}
img.loaded {
  opacity: 1;
}

3. jQuery を使用した遅延読み込みの実装
jQuery を使用した遅延読み込みの実装は非常に簡単です。 $(window).on('scroll', function(){}) イベントを使用してスクロール イベントをリッスンし、画像が表示されているかどうかを判断して遅延読み込みをトリガーできます。

$(window).on('scroll', function() {
  $('img').each(function() {
    if (isElementInViewport($(this)) && !$(this).hasClass('loaded')) {
      $(this).attr('src', $(this).data('src')).addClass('loaded');
    }
  });
});
function isElementInViewport(el) {
  var rect = el.get(0).getBoundingClientRect();
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
}

上記のコードはスクロール イベントをリッスンし、各 img 要素を判定します。要素が表示領域内にあり、ロードされていない場合は、data-src 属性の値を src に代入し、追加します。ロードされたクラス名は、ロード済みとしてマークするために使用されます。

4. フラグメントの読み込みとパフォーマンスの最適化
パフォーマンスをさらに向上させるために、すべての画像を一度に読み込むのではなく、画像を複数のフラグメントに分割して読み込むことができます。これにより、ページが一度に大量の画像を要求することによって発生するパフォーマンスの問題を回避できます。

$(window).on('scroll', function() {
  var windowHeight = $(window).height();
  var scrollTop = $(window).scrollTop();
  $('img:not(.loaded)').each(function() {
    if (isElementInViewport($(this), windowHeight, scrollTop)) {
      $(this).attr('src', $(this).data('src')).addClass('loaded');
    }
  });
});
function isElementInViewport(el, windowHeight, scrollTop) {
  var rect = el.get(0).getBoundingClientRect();
  return (
    rect.top >= (scrollTop - windowHeight) &&
    rect.top <= (scrollTop + windowHeight * 2)
  );
}

上記のコードでは、ウィンドウの高さとスクロール バーの位置を取得することで、各画像が表示領域内にあるかどうかを判断します。表示領域内の画像のみが読み込まれます。

要約すると、HTML、CSS、jQuery を使用することで、画像の遅延読み込みという高度なテクニックを簡単に実装し、Web ページの読み込み速度とユーザー エクスペリエンスを向上させることができます。カスタムの data-src 属性、CSS スタイル、jQuery イベント リスナーを設定し、フラグメントの読み込みとパフォーマンスの最適化を組み合わせることで、画像の読み込み動作をより柔軟に制御し、ユーザー エクスペリエンスとページのパフォーマンスを向上させることができます。この記事で提供されているコード例が役立つことを願っています。

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