遅延ロードの実装に使用されるメソッド_遅延ロードの実装に使用されるメソッド-フロントエンドQ&A-php.cn

遅延読み込みを実装する方法には、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 で導入されたモジュール読み込み方法であり、

人気のチュートリアル

詳細>