遅延読み込みを実装する方法

遅延読み込みを実装する方法には、1. Intersection Observer API、2. 動的インポート、3. カスタム イベント リスナーなどがあります。詳細な紹介: 1. Intersection Observer API はブラウザーが提供する API であり、要素とビューポートの位置関係を監視するために使用できます要素がビューポートに入ると、API はコールバック関数をトリガーします。リソースのロードが実行可能 操作; 2. 動的インポートなど

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

遅延読み込みは、画像、ビデオ、サードパーティのスクリプトなど、Web ページ内の特定のリソースの読み込みを遅らせる戦略です。遅延読み込みにより、ページの初期読み込み時間を短縮し、ページの読み込み速度とパフォーマンスを向上させることができます。ここでは、一般的な遅延読み込み方法をいくつか紹介します。

1. Intersection Observer API

Intersection Observer API はブラウザが提供する API で、要素とビューポートの位置関係を監視するために使用できます。要素がビューポートに入ると、API はリソースをロードできるコールバック関数をトリガーします。 Intersection Observer API を使用して遅延読み込みを実装する例を次に示します。

<img data-src="image1.jpg" class="lazy-load" />  
  
<script>  
  const lazyImages = document.querySelectorAll(&#39;.lazy-load&#39;);  
    
  const observer = new IntersectionObserver((entries, observer) => {  
    entries.forEach(entry => {  
      if (entry.isIntersecting) {  
        const img = entry.target;  
        img.src = img.getAttribute(&#39;data-src&#39;);  
        observer.unobserve(img);  
      }  
    });  
  });  
    
  lazyImages.forEach(img => observer.observe(img));  
</script>

上の例では、image 要素がビューポートに入ると、data-src 属性が src 属性に置き換えられ、image読み込みが始まります。画像がロードされると、Intersection Observer API は要素の監視を停止します。

2. 動的インポート

動的インポートは、ES6 で導入されたモジュール読み込み方法であり、3f1c4e4b6b16bbbd69b2ee476dc4f83a タグでモジュールをプリロードせずに、実行時にモジュールを動的に読み込むことができます。動的インポートを通じて、サードパーティのスクリプトまたはモジュールをオンデマンドでロードできます。以下は、動的インポートを使用して遅延読み込みを実装する例です。

import('module1.js')  
  .then(module => {  
    // 使用 module  
  })  
  .catch(err => {  
    // 处理加载失败  
  });

上の例では、module1.js は必要なときに 1 回だけ読み込まれます。このようにして、一度に多数のスクリプトをロードすることによって引き起こされるページのパフォーマンスの問題を回避できます。

3. カスタム イベント リスナー

ブラウザによって提供される API を使用することに加えて、カスタム イベント リスナーを介して遅延読み込みを実装することもできます。リソースをロードする必要がある場合は、カスタム イベントをトリガーし、イベント リスナーでリソースをロードする操作を実行できます。カスタム イベント リスナーを使用して遅延読み込みを実装する例を次に示します:

<img data-src="image2.jpg" class="lazy-load" />  
  
<script>  
  const lazyImages = document.querySelectorAll(&#39;.lazy-load&#39;);  
  const lazyImageEvent = new CustomEvent(&#39;lazy-load&#39;);  
    
  lazyImages.forEach(img => {  
    img.addEventListener(&#39;lazy-load&#39;, () => {  
      img.src = img.getAttribute(&#39;data-src&#39;);  
    });  
    img.dispatchEvent(lazyImageEvent); // 触发自定义事件，开始加载图片  
  });  
</script>

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