Comment utiliser HTML, CSS et jQuery pour implémenter des techniques avancées de chargement paresseux d'images

Comment utiliser HTML, CSS et jQuery pour implémenter des techniques avancées de chargement paresseux d'images

Le chargement paresseux est un moyen technique pour améliorer les performances des pages Web, particulièrement adapté aux pages Web contenant un grand nombre d'images. En utilisant HTML, CSS et jQuery, nous pouvons facilement implémenter le chargement paresseux des images pour accélérer le chargement des pages Web et améliorer l'expérience utilisateur. Cet article présentera comment utiliser ces trois technologies pour implémenter des techniques avancées de chargement paresseux d'images et donnera des exemples de code spécifiques.

1. Préparation HTML
En HTML, nous devons remplacer l'attribut src de chaque image qui doit être chargée paresseusement par un attribut data-src personnalisé. Dans le même temps, afin d'obtenir l'effet de chargement progressif des images, nous pouvons définir un espace réservé.

<img data-src="path/to/image.jpg" src="path/to/placeholder.jpg" alt="image">

2. Paramètre de style CSS
Afin de conserver l'affichage de l'image d'espace réservé avant le chargement de l'image, nous devons utiliser CSS pour définir l'élément img. Dans le même temps, afin d'obtenir un effet de chargement progressif, nous pouvons également définir un effet de transition.

img {
  width: 100%;
  height: auto;
  max-width: 100%;
  opacity: 0;
  transition: opacity 0.3s ease-in;
}
img.loaded {
  opacity: 1;
}

3. jQuery implémente le chargement paresseux
Il est très simple d'implémenter le chargement paresseux à l'aide de jQuery. Nous pouvons utiliser l'événement $(window).on('scroll', function(){}) pour écouter les événements de défilement et déclencher un chargement paresseux en déterminant si l'image est visible.

$(window).on('scroll', function() {
  $('img').each(function() {
    if (isElementInViewport($(this)) && !$(this).hasClass('loaded')) {
      $(this).attr('src', $(this).data('src')).addClass('loaded');
    }
  });
});
function isElementInViewport(el) {
  var rect = el.get(0).getBoundingClientRect();
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
}

Le code ci-dessus écoutera l'événement scroll et jugera chaque élément img Si l'élément se trouve dans la zone visible et n'a pas été chargé, attribuez la valeur de l'attribut data-src à src et ajoutez le nom de la classe chargée. aux balises chargées.

4. Chargement des fragments et optimisation des performances
Afin d'améliorer encore les performances, nous pouvons diviser l'image en plusieurs fragments à charger au lieu de charger toutes les images en même temps. Cela peut éviter les problèmes de performances causés par la page demandant un grand nombre d’images à la fois.

$(window).on('scroll', function() {
  var windowHeight = $(window).height();
  var scrollTop = $(window).scrollTop();
  $('img:not(.loaded)').each(function() {
    if (isElementInViewport($(this), windowHeight, scrollTop)) {
      $(this).attr('src', $(this).data('src')).addClass('loaded');
    }
  });
});
function isElementInViewport(el, windowHeight, scrollTop) {
  var rect = el.get(0).getBoundingClientRect();
  return (
    rect.top >= (scrollTop - windowHeight) &&
    rect.top <= (scrollTop + windowHeight * 2)
  );
}

Dans le code ci-dessus, nous déterminons si chaque image se trouve dans la zone visible en obtenant la hauteur de la fenêtre et la position de la barre de défilement. Seules les images situées dans la zone visible seront chargées.

Pour résumer, en utilisant HTML, CSS et jQuery, nous pouvons facilement mettre en œuvre des techniques avancées de chargement paresseux d'images et améliorer la vitesse de chargement et l'expérience utilisateur des pages Web. En définissant des attributs data-src personnalisés, des styles CSS et des écouteurs d'événements jQuery, ainsi qu'en combinant le chargement de fragments et l'optimisation des performances, nous pouvons contrôler de manière plus flexible le comportement de chargement des images et améliorer l'expérience utilisateur et les performances des pages. J'espère que les exemples de code fournis dans cet article vous seront utiles !

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!