HTML, CSS et jQuery : astuces pour le chargement paresseux des images

HTML, CSS et jQuery : Conseils pour implémenter le chargement paresseux des images

Dans les sites Web modernes, le chargement paresseux des images est une technique d'optimisation couramment utilisée, qui peut améliorer les performances de chargement du site Web et réduire la charge sur le serveur . En chargeant paresseusement les images, vous pouvez économiser de la bande passante et accélérer le chargement des pages en chargeant les images uniquement lorsque l'utilisateur fait défiler vers la zone visible. Cet article expliquera comment utiliser HTML, CSS et jQuery pour implémenter le chargement différé d'images et fournira des exemples de code spécifiques.

1. Structure HTML
Tout d'abord, en HTML, nous devons ajouter un espace réservé pour chaque image qui doit être chargée paresseusement. Cet espace réservé peut être un élément div ordinaire et utiliser des styles CSS pour définir la largeur et la hauteur afin de maintenir la page. la mise en page est stable.

<div class="image-container">
  <div class="placeholder"></div>
  <img data-src="image.jpg" alt="Image">
</div>

Dans le code ci-dessus, image-container représente le conteneur de l'image, et placeholder est un espace réservé qui sera affiché avant le chargement de l'image. L'attribut data-src de la balise img stocke l'adresse réelle de l'image, tandis que l'attribut alt fournit un texte alternatif pour l'image. image-container表示图片的容器，placeholder是一个占位符，在图像加载之前会显示。img标签的data-src属性存储图像的真实地址，而alt属性则为图像提供替代文本。

二、CSS样式
接下来，我们需要为占位符和图像设置一些CSS样式。

.image-container {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 75%; /* 设置高度占比 */
}

.placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f3f3f3; /* 设置占位符背景颜色 */
}

img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 等比例缩放填充容器 */
  opacity: 0; /* 图像透明度为0，初始状态不显示 */
  transition: opacity 0.3s ease; /* 添加过渡效果 */
}

在上述代码中，.image-container使用了相对定位，设置了宽度为100%，高度为0，并通过padding-bottom属性设置了一个高度占比，可以根据具体需求进行调整。.placeholder设置了绝对定位，占满整个容器，并设置了背景颜色。img设置了绝对定位，将图像放置到容器的左上角，设置了宽度和高度为100%并使用object-fit来保持图像的比例，初始状态下透明度为0，并添加了过渡效果。

三、jQuery懒加载
最后，我们使用jQuery来实现图像的懒加载。需要在页面加载完毕后，当用户滚动到可见区域时，将图像的data-src属性值赋给src属性，并将透明度改为1，实现图像的显示。

$(window).on('scroll', function () {
  $('.image-container').each(function () {
    if ($(this).offset().top < $(window).scrollTop() + $(window).height()) {
      var $img = $(this).find('img');
      $img.attr('src', $img.data('src'));
      $img.css('opacity', 1);
    }
  });
});

上述代码中，当用户滚动页面时，使用offset().top获取每个图像容器的顶部位置，与scrollTop()和height()比较，判断是否已经滚动到可见区域。如果是，则将图像的data-src属性值赋给src

Ensuite, nous devons définir certains styles CSS pour les espaces réservés et les images.

Dans le code ci-dessus, .image-container utilise le positionnement relatif, définit la largeur à 100 %, la hauteur à 0 et la définit via le padding-bottom attribut Un rapport de hauteur qui peut être ajusté en fonction de besoins spécifiques. .placeholder définit le positionnement absolu, remplit tout le conteneur et définit la couleur d'arrière-plan. img définit le positionnement absolu, place l'image dans le coin supérieur gauche du conteneur, définit la largeur et la hauteur à 100 % et utilise object-fit pour conserver les proportions du image, l'état initial Réduisez la transparence à 0 et ajoutez un effet de transition.

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!