Welche Methode wird zum Implementieren von Lazy Loading verwendet? Welche Methode wird zum Implementieren von Lazy Loading verwendet?-Front-End-Fragen und Antworten-php.cn

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.

So implementieren Sie Lazy Loading

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>

Nach dem Login kopieren

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

Neueste Artikel des Autors