Comment implémenter le chargement paresseux

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.

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>

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 3f1c4e4b6b16bbbd69b2ee476dc4f83a Grâce à Dynamic Import, des scripts ou des modules tiers peuvent être chargés à la demande. Voici un exemple d'utilisation de Dynamic Import pour implémenter le chargement paresseux :

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

Dans l'exemple ci-dessus, module1.js sera chargé en cas de besoin, et une seule fois. De cette façon, les problèmes de performances des pages causés par le chargement d'un grand nombre de scripts à la fois peuvent être évités.

3. Écouteur d'événements personnalisé

En plus d'utiliser l'API fournie par le navigateur, vous pouvez également implémenter un chargement paresseux via des écouteurs d'événements personnalisés. Lorsque vous devez charger des ressources, vous pouvez déclencher un événement personnalisé, puis effectuer l'opération de chargement des ressources dans l'écouteur d'événements. Voici un exemple d'utilisation d'un écouteur d'événements personnalisé pour implémenter le chargement différé :

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!