So implementieren Sie Lazy Loading

Zu den Methoden zum Implementieren von Lazy Loading gehören: 1. Intersection Observer API; 2. Dynamischer Import; 3. Benutzerdefinierte Ereignis-Listener usw. Detaillierte Einführung: 1. Die Intersection Observer API ist eine vom Browser bereitgestellte API, mit der die Positionsbeziehung zwischen Elementen und dem Ansichtsfenster überwacht werden kann. Wenn das Element in das Ansichtsfenster eintritt, löst die API eine Rückruffunktion aus Laden von Ressourcen kann ausgeführt werden.

Das Betriebssystem dieses Tutorials: Windows 10-System, DELL G3-Computer.

Lazy Loading ist eine Strategie, um das Laden bestimmter Ressourcen in Webseiten, wie z. B. Bilder, Videos, Skripte von Drittanbietern usw., zu verzögern. Durch verzögertes Laden können Sie die anfängliche Ladezeit der Seite verkürzen und die Geschwindigkeit und Leistung beim Laden der Seite verbessern. Hier sind einige gängige Lazy-Loading-Methoden.

1. Intersection Observer API

Intersection Observer API ist eine vom Browser bereitgestellte API, mit der die Positionsbeziehung zwischen Elementen und dem Ansichtsfenster überwacht werden kann. Wenn ein Element das Ansichtsfenster betritt, löst die API eine Rückruffunktion aus, über die die Ressource geladen werden kann. Hier ist ein Beispiel für die Verwendung der Intersection Observer API zum Implementieren von Lazy Loading:

<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>

Im obigen Beispiel wird das Attribut data-src durch das Attribut src ersetzt, wenn das Bildelement in das Ansichtsfenster eintritt, und das Laden des Bildes beginnt. Wenn das Bild geladen wird, beendet die Intersection Observer API die Beobachtung des Elements.

2. Dynamischer Import

Dynamischer Import ist eine in ES6 eingeführte Methode zum Laden von Modulen, die Module zur Laufzeit dynamisch laden kann, ohne sie im 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tag zu laden. Durch den dynamischen Import können Skripte oder Module von Drittanbietern bei Bedarf geladen werden. Hier ist ein Beispiel für die Verwendung von Dynamic Import zum Implementieren von Lazy Loading:

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

Im obigen Beispiel wird module1.js bei Bedarf und nur einmal geladen. Auf diese Weise können Probleme mit der Seitenleistung vermieden werden, die durch das gleichzeitige Laden einer großen Anzahl von Skripten verursacht werden.

3. Benutzerdefinierter Ereignis-Listener

Zusätzlich zur Verwendung der vom Browser bereitgestellten API können Sie auch Lazy Loading über benutzerdefinierte Ereignis-Listener implementieren. Wenn Sie Ressourcen laden müssen, können Sie ein benutzerdefiniertes Ereignis auslösen und dann den Vorgang zum Laden von Ressourcen im Ereignis-Listener ausführen. Hier ist ein Beispiel für die Verwendung eines benutzerdefinierten Ereignis-Listeners zur Implementierung von Lazy Loading:

<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>

Das obige ist der detaillierte Inhalt vonSo implementieren Sie Lazy Loading. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!