Quelle méthode est utilisée pour implémenter le chargement paresseux_Quelle méthode est utilisée pour implémenter le chargement paresseux-Questions et réponses frontales-php.cn

Comment implémenter le chargement paresseux

百草

Libérer： 2023-11-16 14:50:32

original

1136 Les gens l'ont consulté

Les méthodes pour implémenter le chargement paresseux incluent : 1. API Intersection Observer 2. Importation dynamique 3. Écouteurs d'événements personnalisés, etc. Introduction détaillée : 1. L'API Intersection Observer est une API fournie par le navigateur, qui peut être utilisée pour surveiller la relation de position entre les éléments et la fenêtre d'affichage. Lorsque l'élément entre dans la fenêtre d'affichage, l'API déclenche une fonction de rappel, dans laquelle le. le chargement des ressources peut être exécuté. 2. Importation dynamique, etc.

Comment implémenter le chargement paresseux

Le système d'exploitation de ce tutoriel : système Windows 10, ordinateur DELL G3.

Le chargement paresseux est une stratégie permettant de retarder le chargement de certaines ressources dans les pages Web, telles que des images, des vidéos, des scripts tiers, etc. Grâce au chargement paresseux, vous pouvez réduire le temps de chargement initial de la page et améliorer la vitesse et les performances de chargement de la page. Voici quelques méthodes courantes de chargement paresseux.

1. API Intersection Observer

L'API Intersection Observer est une API fournie par le navigateur, qui peut être utilisée pour surveiller la relation de position entre les éléments et la fenêtre. Lorsqu'un élément entre dans la fenêtre, l'API déclenche une fonction de rappel où la ressource peut être chargée. Voici un exemple d'utilisation de l'API Intersection Observer pour implémenter le chargement différé :

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

Copier après la connexion

Dans l'exemple ci-dessus, lorsque l'élément d'image entre dans la fenêtre, l'attribut data-src est remplacé par l'attribut src et le chargement de l'image démarre. Lorsque l'image est chargée, l'API Intersection Observer cesse d'observer l'élément.

2. Dynamic Import

Dynamic Import est une méthode de chargement de module introduite dans ES6, qui peut charger dynamiquement des modules au moment de l'exécution sans les précharger dans la balise

Derniers articles par auteur