Comment utiliser HTML, CSS et jQuery pour obtenir un défilement infini d'une liste d'images chargée

Comment utiliser HTML, CSS et jQuery pour implémenter le chargement par défilement infini de listes d'images

Avec le développement d'Internet, l'utilisation d'images est de plus en plus répandue. Nous rencontrons souvent des situations où nous devons afficher un grand nombre d’images, comme sur les plateformes de réseaux sociaux, les sites de commerce électronique, etc. Cependant, lors du chargement d'un grand nombre d'images, le chargement de toutes les images en même temps peut ralentir le chargement de la page, voire même planter. Pour résoudre ce problème, nous pouvons utiliser la technologie de chargement par défilement infini, également connue sous le nom de « liste déroulante infinie », afin que les nouvelles images ne soient chargées que lorsque l'utilisateur fait défiler vers le bas de la page. Cet article expliquera comment utiliser HTML, CSS et jQuery pour implémenter une liste d'images chargées à défilement infini et fournira des exemples de code détaillés.

1. Structure HTML
Tout d'abord, nous devons configurer un conteneur pour afficher les images. Ajoutez une liste non ordonnée (<ul></ul>) au code HTML et attribuez-lui un identifiant unique, tel que image-list. Chaque élément d'image est représenté par un élément de liste (<li>), et l'URL de l'image sera stockée en tant qu'attribut data-src de l'élément de liste. <ul></ul>），并给它一个唯一的ID，例如image-list。每个图片项都使用列表项（<li>）来表示，图片的URL将作为列表项的data-src属性存储。

<ul id="image-list">
  <li data-src="image1.jpg"></li>
  <li data-src="image2.jpg"></li>
  <li data-src="image3.jpg"></li>
  <!-- 其他图片项 -->
</ul>

二、CSS样式
接下来，我们需要设置一些CSS样式来装饰图片列表，并控制图像的显示。以下是一个示例：

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

#image-list li {
  display: inline-block;
  width: 200px;
  height: 200px;
  background-color: #f2f2f2;
  margin: 10px;
  border-radius: 5px;
  overflow: hidden;
}

#image-list li img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

三、jQuery实现无限滚动加载
在jQuery中，我们可以使用scroll事件来监听页面滚动的位置，并在滚动到页面底部时加载新的图片。

首先，我们需要创建一个名为loadImages的函数来加载图片，然后在页面加载完成和滚动时调用该函数。

function loadImages() {
  var windowHeight = $(window).height(); // 当前窗口的高度
  var scrollHeight = $(document).height(); // 文档的总高度
  var scrollTop = $(window).scrollTop(); // 滚动条距离顶部的高度

  // 当滚动到页面底部时加载新的图片
  if (scrollTop + windowHeight == scrollHeight) {
    var imageList = $('#image-list');
    var imagesToLoad = 10; // 每次加载的图片数量

    // 根据需要加载的图片数量，从data-src属性中获取对应的图片URL，然后将<img  alt="Comment utiliser HTML, CSS et jQuery pour obtenir un défilement infini d'une liste d'images chargée" >元素添加到列表项中
    for (var i = 0; i < imagesToLoad; i++) {
      var nextImage = imageList.find('li:not(.loaded)').first(); // 找到未加载的下一张图片
      var imgUrl = nextImage.data('src'); // 获取图片URL
      nextImage.append('<img  src="' + imgUrl + '" alt="Comment utiliser HTML, CSS et jQuery pour obtenir un défilement infini d'une liste d'images chargée" >').addClass('loaded'); // 添加<img  alt="Comment utiliser HTML, CSS et jQuery pour obtenir un défilement infini d'une liste d'images chargée" >元素并标记为已加载
    }
  }
}

// 页面加载完成时加载初始图片
$(document).ready(function() {
  loadImages();
});

// 当页面滚动时加载更多图片
$(window).scroll(function() {
  loadImages();
});

以上代码中，loadImages函数通过比较窗口高度、滚动条距离顶部的高度和文档总高度，判断是否滚动到了页面底部。当滚动到页面底部时，它会从data-src属性中获取未加载的图片URL，并将<img alt="Comment utiliser HTML, CSS et jQuery pour obtenir un défilement infini d'une liste d'images chargée" >元素添加到相应的列表项中，并添加一个类名loadedrrreee

2. Styles CSS

Ensuite, nous devons définir certains styles CSS pour décorer la liste d'images et contrôler l'affichage des images. Voici un exemple :
rrreee

3. jQuery implémente le chargement par défilement infini🎜Dans jQuery, nous pouvons utiliser l'événement scroll pour surveiller la position de défilement de la page et charger de nouvelles images lors du défilement vers le bas. de la page. 🎜🎜Tout d'abord, nous devons créer une fonction appelée loadImages pour charger les images, puis appeler cette fonction lorsque la page est chargée et défilée. 🎜rrreee🎜Dans le code ci-dessus, la fonction loadImages détermine si elle a défilé vers le bas de la page en comparant la hauteur de la fenêtre, la hauteur de la barre de défilement depuis le haut et la hauteur totale du document. Lors du défilement vers le bas de la page, il obtient l'URL de l'image déchargée à partir de l'attribut data-src et ajoute l'élément <img alt="Comment utiliser HTML, CSS et jQuery pour obtenir un défilement infini d'une liste d'images chargée" > à l'élément de liste correspondant, et ajoutez un nom de classe loaded pour marquer que l'image a été chargée. 🎜🎜4. Résumé🎜Grâce à l'implémentation du code ci-dessus, nous avons implémenté avec succès une liste d'images à défilement infini en utilisant HTML, CSS et jQuery. Les utilisateurs n'ont qu'à faire défiler vers le bas de la page pour charger automatiquement de nouvelles images, améliorant ainsi efficacement l'effet d'affichage des images et l'expérience utilisateur. Dans les applications réelles, nous pouvons optimiser et étendre davantage le code en fonction des besoins, comme l'ajout d'animations de chargement, l'optimisation du chargement des ressources, la mise en œuvre du chargement paresseux des images, etc., pour améliorer les performances des pages et l'expérience utilisateur. Nous espérons que les exemples de cet article pourront aider les lecteurs à mieux comprendre les principes et méthodes de mise en œuvre du chargement par défilement infini et à les appliquer de manière flexible dans la pratique. 🎜

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!