Implémentation d'une fonction de chargement différé basée sur JavaScript

Implémentation de la fonction de chargement paresseux basée sur JavaScript

Le chargement paresseux est une technologie d'optimisation frontale couramment utilisée conçue pour améliorer la vitesse de chargement et l'expérience utilisateur de la page. Grâce au chargement paresseux, certaines ressources de la page (telles que les images, les vidéos, les textes, etc.) peuvent être retardées jusqu'à ce que l'utilisateur en ait besoin ou soit sur le point de les parcourir, réduisant ainsi la demande réseau et le chargement de la page lors du premier chargement.

Dans cet article, nous présenterons comment utiliser JavaScript pour implémenter la fonction de chargement différé et fournirons des exemples de code.

1. Principe du chargement paresseux

Le principe du chargement paresseux est de charger des ressources lorsque la page défile jusqu'à une position spécifique ou que l'utilisateur se dirige vers un endroit où les ressources doivent être chargées en écoutant des événements de défilement de page ou d'autres comportements interactifs. .

2. Étapes pour implémenter le chargement paresseux

2.1 Tout d'abord, vous devez ajouter un identifiant spécifique à l'élément qui doit être chargé paresseux. Il peut s'agir d'un attribut de classe ou d'un attribut de données, etc. Par exemple, ajoutez un attribut de classe « paresseux » à l’image qui doit être chargée paresseusement.

Parmi eux, l'attribut src est l'image d'espace réservé et le data-src l'attribut est une véritable adresse d'image.

2.2 Une fois la page chargée, utilisez JavaScript pour obtenir tous les éléments avec des indicateurs de chargement paresseux et lier un événement de défilement.

<script></script>

document.addEventListener("DOMContentLoaded", function() {
  var lazyImages = document.querySelectorAll(".lazy");

  // 绑定滚动事件
  window.addEventListener("scroll", lazyLoad);
  window.addEventListener("resize", lazyLoad);
  
  // 加载初始屏幕可见区域内的图片
  lazyLoad();
  
  function lazyLoad() {
    lazyImages.forEach(function(img) {
      if (isInViewport(img)) {
        img.src = img.getAttribute("data-src");
        img.classList.remove("lazy");
      }
    });

    // 删除滚动事件绑定，减少性能消耗
    if (lazyImages.length === 0) {
      window.removeEventListener("scroll", lazyLoad);
      window.removeEventListener("resize", lazyLoad);
    }
  }

  // 检查元素是否在可视区域内
  function isInViewport(element) {
    var rect = element.getBoundingClientRect();
    return (
      rect.bottom >= 0 &&
      rect.right >= 0 &&
      rect.top <= (window.innerHeight || document.documentElement.clientHeight) &&
      rect.left <= (window.innerWidth || document.documentElement.clientWidth)
    );
  }

});

3. Test de l'effet de chargement paresseux

Dans le code ci-dessus, nous utilisons deux écouteurs d'événements (faire défiler et redimensionner) pour surveiller le défilement des pages et la fenêtre changements de taille. Chaque fois qu'il détecte un défilement ou un changement de taille de fenêtre, la fonction lazyLoad sera appelée.

La fonction lazyLoad parcourt toutes les images à chargement paresseux et vérifie si elles se trouvent dans la zone visible. Si tel est le cas, attribuez l'attribut data-src à src, c'est-à-dire chargez l'image réelle et supprimez l'attribut de classe sur paresseux. Utilisez la fonction isInViewport ci-dessus pour déterminer si l'élément se trouve dans la zone visible.

4. Résumé

Le chargement paresseux est une technologie frontale très pratique, qui améliore non seulement les performances des pages Web, mais améliore également l'expérience utilisateur. La mise en œuvre de la fonction de chargement différé via JavaScript peut réduire considérablement le temps de chargement des pages et les requêtes réseau.

J'espère que cet article vous aidera à comprendre la méthode de mise en œuvre du chargement paresseux et j'espère que vous pourrez apporter les modifications et optimisations correspondantes en fonction des besoins de votre propre projet. Je vous souhaite de bons résultats lorsque vous utilisez la technologie de chargement paresseux !

Échantillon de code terminé.

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!