画像を遅延読み込みするにはどのような方法がありますか?

画像の遅延読み込みの方法には、Intersection Observer に基づく遅延読み込み、スクロール イベント監視を使用した遅延読み込み、setTimeout を使用した遅延読み込みが含まれます。詳細な紹介: 1. Intersection Observer に基づく遅延読み込み Intersection Observer はブラウザーによって提供される API で、要素がユーザーのビューポートに入ったかどうかを監視できます; 2. スクロール イベント監視を使用した遅延読み込み (スクロール イベントを監視することで判断されます)。等

このチュートリアルのオペレーティング システム: Windows 10 システム、DELL G3 コンピューター。

画像の遅延読み込みは、Web ページのパフォーマンスを最適化するための手法で、ページ上の画像の読み込みを遅らせ、画像がユーザーのビューポートに表示される直前にのみ読み込みます。これにより、ページの読み込み時間が短縮され、ユーザー エクスペリエンスと Web サイト全体のパフォーマンスが向上します。この記事では、一般的に使用される画像の遅延読み込み方法をいくつか紹介します。

1. Intersection Observer に基づく遅延読み込み:

Intersection Observer は、要素がユーザーのビューポートに入ったかどうかを監視できるブラウザーによって提供される API です。 Intersection Observer を使用すると、イメージ要素が表示されているかどうかを監視し、イメージがビューポートに入ったときにそれらの要素を読み込むことができます。この方法はシンプルで使いやすいだけでなく、パフォーマンスも優れています。

次は、Intersection Observer を使用して画像の遅延読み込みを実装するサンプル コードです:

// 创建一个Intersection Observer实例
const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      // 当图片进入视口时加载它
      entry.target.src = entry.target.dataset.src;
      observer.unobserve(entry.target);
    }
  });
});
// 获取所有需要懒加载的图片元素，并添加观察者
const lazyImages = document.querySelectorAll('.lazy');
lazyImages.forEach((lazyImage) => {
  observer.observe(lazyImage);
});

2. スクロール イベント監視を使用した遅延読み込み:

この方法は、監視によるものです。スクロール イベントを使用して、画像がビューポートに入るかを決定します。ユーザーがページをスクロールするときに、各画像の位置がビューポート内にあるかどうかを確認し、ビューポート内にある場合は画像をロードします。

次は、スクロール イベント リスニングを使用して画像の遅延読み込みを実装するサンプル コードです:

window.addEventListener('scroll', () => {
  const lazyImages = document.querySelectorAll('.lazy');
  lazyImages.forEach((lazyImage) => {
    if (lazyImage.getBoundingClientRect().top <= window.innerHeight && lazyImage.getBoundingClientRect().bottom >= 0) {
      lazyImage.src = lazyImage.dataset.src;
      lazyImage.classList.remove('lazy');
    }
  });
});

3. setTimeout を使用した遅延読み込み:

このメソッドは、遅延 画像をロードする時間。ページが読み込まれるとき、最初にプレースホルダー画像を読み込み、次に setTimeout を使用して実際の画像の読み込みを遅らせ、遅延読み込み効果を実現します。

以下は、setTimeout を使用して画像の遅延読み込みを実装するサンプル コードです:

window.addEventListener('load', () => {
  const lazyImages = document.querySelectorAll('.lazy');
  lazyImages.forEach((lazyImage) => {
    lazyImage.src = lazyImage.dataset.placeholder;
    setTimeout(() => {
      lazyImage.src = lazyImage.dataset.src;
      lazyImage.classList.remove('lazy');
    }, 1000); // 设置延迟时间，单位为毫秒
  });
});

概要:

画像の遅延読み込みは、Web ページのパフォーマンスを最適化する効果的な方法です。ページの読み込み時間を短縮し、ユーザー エクスペリエンスを向上させることができます。この記事では、Intersection Observer に基づく遅延読み込み、スクロール イベント監視を使用した遅延読み込み、setTimeout を使用した遅延読み込みなど、一般的に使用される画像の遅延読み込み方法をいくつか紹介します。開発者は、画像の遅延読み込みを実装する実際のニーズに基づいて、適切な方法を選択できます。

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