Comment utiliser CSS pour créer des étapes de mise en œuvre de l'effet d'affichage d'image de chargement par défilement

Étapes sur la façon d'utiliser CSS pour créer un effet d'affichage d'image à chargement par défilement

Avec le développement de la technologie Web, le chargement par défilement est devenu un moyen courant d'afficher des images. En utilisant CSS, nous pouvons implémenter un effet d'affichage d'image avec fonction de chargement par défilement, permettant à la page Web de charger automatiquement de nouvelles images pendant que l'utilisateur fait défiler, améliorant ainsi l'expérience utilisateur.

Ce qui suit présentera une étape spécifique pour obtenir l'effet d'affichage de l'image de chargement par défilement et fournira des exemples de code correspondants.

Étape 1 : Créer une structure HTML

Tout d'abord, nous devons créer une structure HTML de base, comprenant un conteneur d'emballage et une liste d'images.

<div class="container">
  <ul class="image-list">
    <li><img src="/static/imghw/default1.png"  data-src="image1.jpg"  class="lazy" alt="Image 1"></li>
    <li><img src="/static/imghw/default1.png"  data-src="image2.jpg"  class="lazy" alt="Image 2"></li>
    <li><img src="/static/imghw/default1.png"  data-src="image3.jpg"  class="lazy" alt="Image 3"></li>
    <!-- 更多图片 -->
  </ul>
</div>

Étape 2 : Définir le style CSS

Ensuite, nous devons définir les styles CSS pour le conteneur et la liste d'images afin qu'ils puissent s'adapter aux besoins de chargement par défilement.

.container {
  height: 500px; /* 设置容器的高度 */
  overflow-y: scroll; /* 设置垂直滚动 */
}

.image-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.image-list li {
  margin-bottom: 20px; /* 设置图片之间的间距 */
}

Étape 3 : Utilisez des pseudo-classes CSS pour implémenter la surveillance du défilement

Afin d'obtenir l'effet de chargement par défilement, nous devons utiliser des pseudo-classes CSS :after pour surveiller les événements de défilement.

.container:after {
  content: "";
  display: block;
  height: 200px; /* 设置伪类的高度，用于触发滚动加载 */
  visibility: hidden;
}

Étape 4 : Utilisez JavaScript pour charger des images

Étant donné que le chargement progressif implique le chargement réel des images, nous devons utiliser JavaScript pour charger les images.

// 监听滚动事件
document.querySelector(".container").addEventListener("scroll", function() {
  var container = this;
  
  // 判断是否到达滚动加载的位置
  if (container.scrollHeight - container.scrollTop === container.clientHeight) {
    // 加载新的图片
    var imageList = document.querySelector(".image-list");
    var li = document.createElement("li");
    var img = document.createElement("img");
    
    img.src = "new_image.jpg";
    img.alt = "New Image";
    
    li.appendChild(img);
    imageList.appendChild(li);
  }
});

Le code ci-dessus ajoutera dynamiquement une nouvelle image lorsque l'utilisateur fera défiler vers le bas de la page.

En résumé, grâce aux étapes ci-dessus, nous pouvons utiliser CSS et JavaScript pour obtenir un effet d'affichage d'image de chargement par défilement. En chargeant dynamiquement de nouvelles images, nous pouvons améliorer la vitesse de chargement et l'expérience utilisateur des pages Web.

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!