Comment implémenter le chargement paresseux d'images réactives à l'aide des propriétés CSS

Comment implémenter le chargement paresseux d'images réactives à l'aide des propriétés CSS

Dans le développement Web, nous rencontrons souvent des situations où un grand nombre d'images doivent être chargées, en particulier sur les appareils mobiles. Afin d'améliorer la vitesse de chargement des pages et l'expérience utilisateur, le chargement paresseux des images est devenu une méthode d'optimisation courante.

Le chargement paresseux signifie que lorsque la page se charge, seules les images de la zone visible sont chargées au lieu de charger toutes les images sur la page entière. Cela réduit considérablement le temps requis pour le chargement initial et évite un gaspillage inutile de bande passante.

Dans cet article, nous présenterons la méthode d'utilisation des propriétés CSS pour implémenter le chargement paresseux d'images réactif, qui peut être appliqué à différentes tailles d'écran et appareils.

Tout d'abord, nous devons définir les images qui doivent être chargées paresseusement en HTML. Ici, nous utilisons l'élément <img alt="Comment implémenter le chargement paresseux d'images réactives à l'aide des propriétés CSS" > et définissons un attribut personnalisé data-src pour stocker l'URL réelle de l'image. <img alt="Comment implémenter le chargement paresseux d'images réactives à l'aide des propriétés CSS" >元素，并设置一个自定义的属性data-src来存储图像的实际URL。

<img class="lazy-image" data-src="image.jpg" alt="Image" />

接下来，我们需要编写CSS样式来隐藏初始的图像，并通过使用background-size属性设置图像的背景图片。

.lazy-image {
  background-image: url(placeholder.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

在上面的代码中，placeholder.jpg是一个占位图像，用于在实际图像加载完成之前显示。

然后，我们使用CSS属性@media来针对不同的屏幕尺寸定义不同的样式。

/* 对于大屏幕设备，立即加载图像 */
@media screen and (min-width: 1024px) {
  .lazy-image {
    background-image: none;
  }
}

/* 对于小屏幕设备，延迟加载图像 */
@media screen and (max-width: 1023px) {
  .lazy-image {
    visibility: hidden;
  }
  
  .lazy-image[data-src] {
    visibility: visible;
  }
}

在上述代码中，我们使用@media指令将屏幕宽度分为两个范围：大于等于1024px和小于1024px。对于大屏幕设备，我们立即加载图像，将background-image设置为none。对于小屏幕设备，我们将.lazy-image的visibility属性设置为hidden，同时为带有data-src属性的.lazy-image元素设置visibility属性为visible，这样就可以实现延迟加载图像。

最后，我们需要使用JavaScript来实现图像的实际加载。

document.addEventListener("DOMContentLoaded", function() {
  const lazyImages = document.querySelectorAll(".lazy-image");

  const lazyLoad = function() {
    lazyImages.forEach(function(img) {
      if (img.getBoundingClientRect().top <= window.innerHeight && img.hasAttribute("data-src")) {
        img.setAttribute("src", img.getAttribute("data-src"));
        img.removeAttribute("data-src");
      }
    });
  };

  window.addEventListener("scroll", lazyLoad);
  window.addEventListener("resize", lazyLoad);
  window.addEventListener("orientationchange", lazyLoad);
});

上述代码中，我们使用document.querySelectorAll获取所有带有.lazy-image类的元素，并定义一个lazyLoad函数来判断图像是否在可见区域内，如果是则加载图像。

最后，我们将lazyLoadrrreee

Ensuite, nous devons écrire des styles CSS pour masquer l'image initiale et définir l'arrière-plan de l'image en utilisant la propriété background-size.

rrreee

Dans le code ci-dessus, placeholder.jpg est une image d'espace réservé qui est utilisée pour s'afficher jusqu'à ce que l'image réelle soit chargée. 🎜🎜Ensuite, nous utilisons l'attribut CSS @media pour définir différents styles pour différentes tailles d'écran. 🎜rrreee🎜Dans le code ci-dessus, nous utilisons la directive @media pour diviser la largeur de l'écran en deux plages : supérieure ou égale à 1024px et inférieure à 1024px. Pour les appareils à grand écran, nous chargeons l'image immédiatement, en définissant background-image sur none. Pour les appareils à petit écran, nous définissons l'attribut visibility de .lazy-image sur hidden, et définissons le data-src<. l>.lazy-image</.> de l'attribut /code> définit l'attribut visibility sur visible, afin que le chargement paresseux des images puisse être réalisé. 🎜🎜Enfin, nous devons utiliser JavaScript pour charger réellement l'image. 🎜rrreee🎜Dans le code ci-dessus, nous utilisons document.querySelectorAll pour obtenir tous les éléments avec la classe .lazy-image et définissons une fonction lazyLoad Pour déterminer si l'image se trouve dans la zone visible, si c'est le cas, chargez l'image. 🎜🎜Enfin, nous lions la fonction lazyLoad aux événements de défilement du navigateur, de changement de taille de fenêtre et de changement d'orientation de l'écran afin que la fonction de chargement soit déclenchée lorsque la page défile ou change de taille. 🎜🎜Ce qui précède est la méthode et l'exemple de code correspondant d'utilisation des propriétés CSS pour implémenter le chargement paresseux d'images réactives. Grâce à cette méthode, nous pouvons optimiser la vitesse de chargement des pages Web, améliorer l’expérience utilisateur et éviter un gaspillage inutile de bande passante. 🎜

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!