So verwenden Sie HTML, CSS und jQuery, um ein unendliches Scrollen einer geladenen Bildliste zu erreichen

So verwenden Sie HTML, CSS und jQuery, um das Laden von Bildlisten durch unendliches Scrollen zu implementieren

Mit der Entwicklung des Internets wird die Verwendung von Bildern immer weiter verbreitet. Wir stoßen häufig auf Situationen, in denen wir eine große Anzahl von Bildern anzeigen müssen, z. B. auf Social-Media-Plattformen, E-Commerce-Websites usw. Wenn Sie jedoch eine große Anzahl von Bildern laden, kann das gleichzeitige Laden aller Bilder dazu führen, dass die Seite langsam lädt oder sogar abstürzt. Um dieses Problem zu lösen, können wir die Infinite-Scroll-Loading-Technologie, auch bekannt als „Infinite Drop-Down“, verwenden, sodass neue Bilder nur geladen werden, wenn der Benutzer zum Ende der Seite scrollt. In diesem Artikel wird erläutert, wie Sie mithilfe von HTML, CSS und jQuery eine geladene Bildliste mit unendlichem Bildlauf implementieren, und detaillierte Codebeispiele bereitstellen.

1. HTML-Struktur
Zuerst müssen wir einen Container für die Anzeige von Bildern einrichten. Fügen Sie dem HTML eine ungeordnete Liste (<ul></ul>) hinzu und geben Sie ihr eine eindeutige ID, z. B. image-list. Jedes Bildelement wird durch ein Listenelement (<li>) dargestellt und die URL des Bildes wird als data-src-Attribut des Listenelements gespeichert. <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="So verwenden Sie HTML, CSS und jQuery, um ein unendliches Scrollen einer geladenen Bildliste zu erreichen" >元素添加到列表项中
    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="So verwenden Sie HTML, CSS und jQuery, um ein unendliches Scrollen einer geladenen Bildliste zu erreichen" >').addClass('loaded'); // 添加<img  alt="So verwenden Sie HTML, CSS und jQuery, um ein unendliches Scrollen einer geladenen Bildliste zu erreichen" >元素并标记为已加载
    }
  }
}

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

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

以上代码中，loadImages函数通过比较窗口高度、滚动条距离顶部的高度和文档总高度，判断是否滚动到了页面底部。当滚动到页面底部时，它会从data-src属性中获取未加载的图片URL，并将<img alt="So verwenden Sie HTML, CSS und jQuery, um ein unendliches Scrollen einer geladenen Bildliste zu erreichen" >元素添加到相应的列表项中，并添加一个类名loadedrrreee

2. CSS-Stile

Als nächstes müssen wir einige CSS-Stile festlegen, um die Bildliste zu dekorieren und die Anzeige von Bildern zu steuern. Das Folgende ist ein Beispiel:
rrreee

3. jQuery implementiert das unendliche Scrollen. In jQuery können wir das scroll-Ereignis verwenden, um die Scrollposition der Seite zu überwachen und neue Bilder zu laden, wenn nach unten gescrollt wird der Seite. 🎜🎜Zuerst müssen wir eine Funktion namens loadImages erstellen, um Bilder zu laden, und diese Funktion dann aufrufen, wenn die Seite geladen und gescrollt wird. 🎜rrreee🎜Im obigen Code bestimmt die Funktion loadImages, ob zum unteren Rand der Seite gescrollt wurde, indem sie die Höhe des Fensters, die Höhe der Bildlaufleiste von oben und die Gesamthöhe vergleicht des Dokuments. Beim Scrollen zum Ende der Seite wird die entladene Bild-URL aus dem Attribut data-src abgerufen und das Element <img alt="So verwenden Sie HTML, CSS und jQuery, um ein unendliches Scrollen einer geladenen Bildliste zu erreichen" > zum entsprechenden Listenelement hinzugefügt Fügen Sie einen Klassennamen loaded hinzu, um zu markieren, dass das Bild geladen wurde. 🎜🎜4. Zusammenfassung🎜Durch die Implementierung des obigen Codes haben wir erfolgreich eine Liste mit unendlich scrollbaren Bildern mithilfe von HTML, CSS und jQuery implementiert. Benutzer müssen nur zum Ende der Seite scrollen, um automatisch neue Bilder zu laden, wodurch der Bildanzeigeeffekt und das Benutzererlebnis effektiv verbessert werden. In tatsächlichen Anwendungen können wir den Code je nach Bedarf weiter optimieren und erweitern, z. B. durch das Hinzufügen von Ladeanimationen, das Optimieren des Ressourcenladens, das Implementieren eines verzögerten Ladens von Bildern usw., um die Seitenleistung und das Benutzererlebnis zu verbessern. Wir hoffen, dass die Beispiele in diesem Artikel den Lesern helfen können, die Implementierungsprinzipien und -methoden des unendlichen Scroll-Ladens besser zu verstehen und sie flexibel in der Praxis anwenden zu können. 🎜

Das obige ist der detaillierte Inhalt vonSo verwenden Sie HTML, CSS und jQuery, um ein unendliches Scrollen einer geladenen Bildliste zu erreichen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!