Implémentez efficacement le chargement paresseux des images de la page Web: en tenant compte à la fois de la réactivité et des performances

Avez-vous déjà envisagé le chargement paresseux des images pour optimiser les performances de la page Web? La technologie de chargement paresseuse peut réduire efficacement le poids de charge de la page initiale et améliorer la vitesse de chargement de la page Web. Cet article explorera une méthode de chargement paresseuse d'image efficace, tout en prenant en compte des images réactives et la meilleure expérience utilisateur.

Le chargement paresseux n'est pas une fonction native du navigateur, et il doit actuellement être implémenté à l'aide de JavaScript. Bien que les versions Chrome 75 et suivantes envisagent de prendre en charge nativement le chargement paresseux des images et des iframes, nous devons toujours utiliser des solutions JavaScript afin d'être compatibles avec d'autres navigateurs. De nombreux générateurs de sites Web statiques, bibliothèques et frameworks fournissent des capacités de chargement paresseuses hors de la bo?te, mais l'introduction d'une bibliothèque complète ou d'un cadre juste pour implémenter cette fonctionnalité peut provoquer des frais généraux de performance. Par conséquent, nous avons choisi d'implémenter le chargement paresseux par nous-mêmes.

Mécanisme de base:

La plupart des méthodes de chargement paresseuses suivent le modèle suivant:

1. Tags HTML: Utiliser <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174502705448368.jpg" class="lazy" alt="Conseils pour rouler votre propre chargement paresseux">

2. Temps de chargement: utilisez Intersection Observer pour détecter si l'image entre dans la fenêtre. Intersection Observer fournit une détection efficace de visibilité des éléments, évitant scroll fréquent et resize des événements.

 // Créer un observateur d'intersection
const Observer = new intersectionObserver (Lazyload, {
  rootmargin: '100px',
  Seuil: 1.0
});

Fonction Lazyload (Elements) {
  Elements.ForEach (image => {
    if (image.INTERSECTIONRATIO> 0) {
      image.src = image.dataset.src;
      Observer.unobserve (image);
    }
  });
}

// Observez tous les éléments IMG avec la classe "paresseuse" const LazyImages = document.QuerySelectorAll ('img.lazy');
LazyImages.ForEach (img => {
  Observer.Observe (IMG);
});

Amélioration et optimisation:

Il y a quelques lacunes dans les méthodes de base ci-dessus:

1. Dépendance JavaScript: l'image ne peut pas être affichée tant que JavaScript n'est pas chargé et exécuté.
2. Battre visuel: la page est vide avant le chargement de l'image, ce qui peut provoquer une insatisfaction visuelle.

En réponse aux problèmes ci-dessus, nous avons apporté les améliorations suivantes:

1. Détection de chargement paresseuse native: utilisez la détection des fonctionnalités pour déterminer si le navigateur prend en charge l'attribut chargement Native loading="lazy" . Si vous êtes pris en charge, utilisez-le directement sans intervention JavaScript.

 if ('chargement' dans htmlimageElement.prototype) {
  document.QuerySelectorall ('img.lazy'). foreach (img => img.src = img.dataset.src);
} autre {
  // Utilisez l'intersection Observer pour implémenter un chargement paresseux}

2. Carte d'espace réservé et transition CSS: Utilisez une carte d'espace réservée de petite taille comme état initial et utilisez CSS pour évoluer et brouiller, supprimez l'effet flou après l'image chargée pour obtenir une transition en douceur.

<picture>
  <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174502705554652.jpg" class="lazy" alt="Conseils pour rouler votre propre chargement paresseux">
</picture>

image {largeur: 100%; débordement: caché; }
image img {largeur: 100%; transition: filtre 0,5S; }
image.lazy img {filter: blur (20px); }

3. Image réactive: utilisez<picture></picture> éléments et<source></source> Les éléments implémentent des images réactives, chargeant des images de différentes tailles en fonction de différentes tailles de fenêtre.

Outils auxiliaires:

Pour simplifier le processus de développement, nous pouvons utiliser les outils auxiliaires suivants:

1. Générateur HTML: Fonction personnalisée ou modèle de moteur aidé à la génération<picture></picture> Code HTML pour l'élément.

2. Traitement par lots d'image: utilisez des outils tels que gulp-image-resize to Batch Générez des images de différentes tailles, ou utilisez des services cloud (tels que Netlify et Cloudary) pour convertir des images à la demande.

Résumer:

Cet article présente une méthode de mise en ?uvre de chargement paresseuse d'image efficace. En combinant la détection des fonctionnalités de chargement paresseuse native, la carte d'espace réservé, la transition CSS, les images réactives et les outils auxiliaires, il peut améliorer l'expérience utilisateur tout en garantissant les performances. Le choix de la bonne méthode de traitement d'image (construction ou conversion à la demande) dépend de la taille et des exigences du projet. Cette méthode peut considérablement améliorer la vitesse de chargement des pages Web et fournir des effets visuels plus lisses.

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!