suchen

Heim >Web-Frontend >js-Tutorial >6 JQuery Infinite Scrolling Demos

6 JQuery Infinite Scrolling Demos

Jennifer Aniston
Jennifer AnistonOriginal
2025-02-18 10:09:10767Durchsuche

6 JQuery Infinite Scrolling Demos

Unendlich scrollen sind jetzt ein häufiges Merkmal und es gibt mehrere Fälle, in denen es wirklich nützlich ist. Zum Beispiel gibt es einige Websites, auf denen wir uns einfach nicht ein gutes Paginationssystem wie Twitter oder sogar Facebook vorstellen können. Ein weiteres Beispiel dafür, wo das unendliche Scrolling nützlich sein kann, ist für eine Suchmaschine: Sie möchten weiterhin neue Links anzeigen, während Sie nicht die gewünschten finden, und ein Paginationssystem kann Sie in Ihrer Forschung verlangsamen. Wenn Sie für Ihr Projekt infinite Scrollen verwenden müssen, finden Sie hier sechs Demos, die Sie als Inspiration zur Implementierung verwenden können. Beachten Sie, dass alle diese Demos mit JQuery geschrieben werden und einige Beispiele JQuery -Plugins verwenden. Andere Beispiele können jedoch problemlos ohne Probleme für Vanille -JS angepasst werden.

Key Takeaways

  • Der Artikel enthält sechs Demos zur Implementierung von Infinite Scrolling, eine Funktion, mit der kontinuierliche Scrollen durch Inhalte ermöglicht werden kann, ohne auf Paginationslinks zu klicken, die Benutzererfahrung und das Engagement zu verbessern.
  • Die Demos enthalten unendlich Scrollen durch Gitter, Blog -Beiträge, Bilder, Zahlen, Tabellenkalkulationen und eine Kombination aus unendlichem Scrollen und Pagination. Jede Demo ist in JQuery geschrieben, obwohl sie für Vanille -JS angepasst werden können, und einige verwenden JQuery -Plugins.
  • Die Implementierung von Infinite Scrolling kann entsprechend den Anforderungen des Projekts angepasst werden, z.
1. Unendliche Scrollen und Gitter

Diese Demo verwendet das JQuery -Mauerwerks -Plugin zusammen mit dem unendlichen Scroll -Plugin. Das Mauerwerks -Plugin ist gut zum Erhalten von Flüssigkeitsnetzlayouts. Das unendliche Scroll -Plugin von Paul Irish ist gut darin, Seiten zu laden, die bereits existieren (daher ist es gut für Ihre SEO). Sie können es verwenden, um statische Seiten wie Page2.html, page3.html usw. zu laden, aber dieses Plugin verarbeitet auch generierte Seiten wie Seite.php? P = 2, Seite.php? P = 3. Um es zu verwenden, müssen Sie jedoch eine Seitenzahl haben, um in Ihren URLs zu steigern. Wenn Sie Seiten wie Page.php? Data = xxx haben, ist dieses Plugin nicht für Sie.

Verwendung - html 

<span><span><span><div</span> class<span>="grid"</span>></span>
</span>	<span><span><span><div</span> class<span>="grid-item grid-item-2"</span>></span>
</span>		<span><span><span><p</span>></span>content<span><span></p</span>></span>
</span>	<span><span><span></div</span>></span>
</span>	…
<span><span><span></div</span>></span>
</span>
<span><!-- The next page which content will be loaded when scrolled -->
</span><span><span><span><nav</span> id<span>="pagination"</span>></span>
</span>	<span><span><span><p</span>></span><span><span><a</span> href<span>="page-2.html"</span>></span>Page 2<span><span></a</span>></span><span><span></p</span>></span>
</span><span><span><span></nav</span>></span></span>
Verwendung - jQuery 

<span>$(document).ready(function() {
</span>	<span>var grid = $('.grid');
</span>
	grid<span>.masonry({
</span>		<span>itemSelector: '.grid-item',
</span>		<span>columnWidth: 200
</span>	<span>});
</span>
	grid<span>.infinitescroll({
</span>		<span>// Pagination element that will be hidden
</span>		<span>navSelector: '#pagination',
</span>
		<span>// Next page link
</span>		<span>nextSelector: '#pagination p a',
</span>
		<span>// Selector of items to retrieve
</span>		<span>itemSelector: '.grid-item',
</span>
		<span>// Loading message
</span>		<span>loadingText: 'Loading new items…'
</span>	<span>},
</span>
	<span>// Function called once the elements are retrieved
</span>	<span>function(new_elts) {
</span>		<span>var elts = $(new_elts).css('opacity', 0);
</span>
		elts<span>.animate({opacity: 1});
</span>		grid<span>.masonry('appended', elts);
</span>	<span>});
</span><span>});</span>
2. Unendlich scrollen durch Blog -Beiträge

Diese Demo verwendet kein Plugin oder keine Bibliothek, um die Infinite Scrolling -Funktion zu verarbeiten. Jedes Mal, wenn das Ende der Seite vom Benutzer erreicht wird, wird ein neuer Beitrag geladen, der durch ein PHP -Skript generiert wird, das den entsprechenden HTML -Code widerspiegelt. Die Demo erreicht nie das Ende des Inhalts, aber Sie können dies erreichen, indem Sie beispielsweise eine leere Zeichenfolge wiederholen, wenn keine Beiträge mehr zu zeigen sind. Wir zeigen ein Ladebild am Ende der Seite im Geiste von Twitter.

Beachten Siehe den Stift Infinite Scrollen durch Blog -Beiträge von SitePoint (@sinepoint) auf CodePen.

Verwendung - html 

<span><span><span><div</span> class<span>="grid"</span>></span>
</span>	<span><span><span><div</span> class<span>="grid-item grid-item-2"</span>></span>
</span>		<span><span><span><p</span>></span>content<span><span></p</span>></span>
</span>	<span><span><span></div</span>></span>
</span>	…
<span><span><span></div</span>></span>
</span>
<span><!-- The next page which content will be loaded when scrolled -->
</span><span><span><span><nav</span> id<span>="pagination"</span>></span>
</span>	<span><span><span><p</span>></span><span><span><a</span> href<span>="page-2.html"</span>></span>Page 2<span><span></a</span>></span><span><span></p</span>></span>
</span><span><span><span></nav</span>></span></span>
Verwendung - jQuery 

<span>$(document).ready(function() {
</span>	<span>var grid = $('.grid');
</span>
	grid<span>.masonry({
</span>		<span>itemSelector: '.grid-item',
</span>		<span>columnWidth: 200
</span>	<span>});
</span>
	grid<span>.infinitescroll({
</span>		<span>// Pagination element that will be hidden
</span>		<span>navSelector: '#pagination',
</span>
		<span>// Next page link
</span>		<span>nextSelector: '#pagination p a',
</span>
		<span>// Selector of items to retrieve
</span>		<span>itemSelector: '.grid-item',
</span>
		<span>// Loading message
</span>		<span>loadingText: 'Loading new items…'
</span>	<span>},
</span>
	<span>// Function called once the elements are retrieved
</span>	<span>function(new_elts) {
</span>		<span>var elts = $(new_elts).css('opacity', 0);
</span>
		elts<span>.animate({opacity: 1});
</span>		grid<span>.masonry('appended', elts);
</span>	<span>});
</span><span>});</span>
3. Unendlich scrollen durch Bilder

Diese Demo lädt Bilder auf unendlicher Schriftrolle ein und erreicht nie das Ende. Es verwendet das JQuery Endless Scroll -Plugin, das so angepasst werden kann, dass sie das Laden von X -Anzahl von Pixeln vom unteren Bildschirm unterliegen. Die Demo klingt dieselben Bilder und fügt sie am Ende der Liste und so weiter ein. Das Skript kann jedoch so angepasst werden, dass die Bilder aus verschiedenen Quellen ganz einfach geladen werden.

Siehe den Stift Infinite Scrollen durch Bilder von sitepoint (@sinepoint) auf CodePen.

Verwendung - html 

<span><span><span><ul</span> id<span>="posts"</span>></span>
</span>	<span><span><span><li</span>></span>
</span>		<span><span><span><article</span>></span>content<span><span></article</span>></span>
</span>	<span><span><span></li</span>></span>
</span>
	…
<span><span><span></ul</span>></span>
</span>
<span><span><span><p</span> id<span>="loading"</span>></span>
</span>	<span><span><span><img</span> src<span>="images/loading.gif"</span> alt<span>="Loading…"</span> /></span>
</span><span><span><span></p</span>></span></span>
Verwendung - jQuery 

<span>$(document).ready(function() {
</span>	<span>var win = $(window);
</span>
	<span>// Each time the user scrolls
</span>	win<span>.scroll(function() {
</span>		<span>// End of the document reached?
</span>		<span>if ($(document).height() - win.height() == win.scrollTop()) {
</span>			<span>$('#loading').show();
</span>
			$<span>.ajax({
</span>				<span>url: 'get-post.php',
</span>				<span>dataType: 'html',
</span>				<span>success: function(html) {
</span>					<span>$('#posts').append(html);
</span>					<span>$('#loading').hide();
</span>				<span>}
</span>			<span>});
</span>		<span>}
</span>	<span>});
</span><span>});</span>
4. Unendliche Liste der Zahlen

Diese Demo verwendet das gleiche Plugin wie das vorherige, aber wir haben die unendliche Schriftrolle auf eine Liste mit einer eigenen vertikalen Scrollbar angewendet. Wenn Sie nach unten scrollen, werden die Zahlen einfach als Listenelemente angehängt.

Siehe Stift eine unendliche Liste von Zahlen von SitePoint (@sinepoint) auf CodePen.

Verwendung - html 

<span><span><span><ul</span> id<span>="images"</span>></span>
</span>	<span><span><span><li</span>></span>
</span>		<span><span><span><a</span> href<span>="https://www.pexels.com/photo/mist-misty-fog-foggy-7919/"</span>></span>
</span>			<span><span><span><img</span> src<span>="https://pexels.imgix.net/photos/7919/pexels-photo.jpg?fit=crop&w=640&h=480"</span> alt<span>=""</span> /></span>
</span>		<span><span><span></a</span>></span>
</span>	<span><span><span></li</span>></span>
</span>
	…
<span><span><span></ul</span>></span></span>
Verwendung - jQuery 

<span>$(document).ready(function() {
</span>	<span>$(window).endlessScroll({
</span>		<span>inflowPixels: 300,
</span>		<span>callback: function() {
</span>			<span>var $img = $('#images li:nth-last-child(5)').clone();
</span>			<span>$('#images').append($img);
</span>		<span>}
</span>	<span>});
</span><span>});</span>
5. Unendliche Tabellenkalkulationen

Diese Demo verwendet dieselbe Technik wie Demo 2, um festzustellen, wann der Benutzer das Ende des Dokuments erreicht hat, nicht nur vertikal, sondern auch horizontal. Jedes Mal, wenn ein Ende erreicht ist, fügen wir der Tabelle eine neue Zeile oder eine neue Spalte hinzu. Es ist genau die Art von Skript, die wir schreiben könnten, wenn wir eine Tabellenkalkulationsanwendung erstellen möchten.

Beachten Sie, dass alle Zellen leer sind. Die Zeilen und Spaltenindizes werden mit CSS -Zählern generiert, damit wir sie nicht selbst berechnen müssen.

Siehe die Stift -Infinite -Tabellenkalkulationen von sitepoint (@sinepoint) auf CodePen.

Verwendung - html 

<span><span><span><ul</span> id<span>="numbers"</span>></span>
</span>	<span><span><span><li</span>></span>1<span><span></li</span>></span>
</span>	<span><span><span><li</span>></span>2<span><span></li</span>></span>
</span>	<span><span><span><li</span>></span>3<span><span></li</span>></span>
</span>	<span><span><span><li</span>></span>4<span><span></li</span>></span>
</span>	<span><span><span><li</span>></span>5<span><span></li</span>></span>
</span>	…
<span><span><span></ul</span>></span></span>
Verwendung - jQuery 

<span>$(document).ready(function() {
</span>	<span>var offset = $('#numbers li').length;
</span>
	<span>$('#numbers').endlessScroll({
</span>		<span>fireOnce: false,
</span>		<span>fireDelay: false,
</span>		<span>loader: '',
</span>		<span>insertAfter: '#numbers li:last',
</span>		<span>content: function(i) {
</span>			<span>return '<li>' + (i + offset) + '</li>';
</span>		<span>}
</span>	<span>});
</span><span>});</span>
6. Unendliche Scroll -Pagination

Es gibt Nachteile gegen unendliches Bildlauf: Wenn es nicht gut implementiert ist, kann die Benutzererfahrung unterbrochen werden. Wenn Sie den Benutzer eine unendliche Liste laden lassen, können sie nach einer Weile ihren Platz verlieren. Das ist eine Sache, die sich niemals mit einem traditionellen Paginationssystem angemeldet. Pagination erfordert jedoch Aktionen des Benutzer

Diese beiden Fakten gaben Tim Severien eine Idee: Was wäre, wenn wir unendlich Scrollen und Pagination kombinieren, um beide Methoden zu nutzen? Das Ergebnis ist diese letzte Demo.

Eine Anfangsseite wird dem Benutzer angezeigt. Wenn der Benutzer nach unten scrollt und den unteren Teil der Seite erreicht, wird automatisch eine neue Seite geladen. Hier genießen wir die Einfachheit durch unendliche Scrollen. Aber die neuen Dinge stammen aus einer Liste, die am Ende des Bildschirms festgelegt ist.

ursprünglich versteckt, diese Liste wird mit der Anzahl dieser Seite jedes Mal gefüllt, wenn eine neue Seite geladen wird. Auf diese Weise kann der Benutzer die zweite Seite abrufen, wenn er auf die entsprechende Nummer auf die entsprechende Nummer aufnimmt.

Siehe den Stift Infinite Scroll Pagination von SitePoint (@sinepoint) auf CodePen.

Verwendung - html 

<span><span><span><div</span> class<span>="grid"</span>></span>
</span>	<span><span><span><div</span> class<span>="grid-item grid-item-2"</span>></span>
</span>		<span><span><span><p</span>></span>content<span><span></p</span>></span>
</span>	<span><span><span></div</span>></span>
</span>	…
<span><span><span></div</span>></span>
</span>
<span><!-- The next page which content will be loaded when scrolled -->
</span><span><span><span><nav</span> id<span>="pagination"</span>></span>
</span>	<span><span><span><p</span>></span><span><span><a</span> href<span>="page-2.html"</span>></span>Page 2<span><span></a</span>></span><span><span></p</span>></span>
</span><span><span><span></nav</span>></span></span>

Verwendung - JavaScript

Bitte beachten Sie, dass dieser Code ES6 verwendet, aber Sie können ihn problemlos in ES5 konvertieren. 

<span>$(document).ready(function() {
</span>	<span>var grid = $('.grid');
</span>
	grid<span>.masonry({
</span>		<span>itemSelector: '.grid-item',
</span>		<span>columnWidth: 200
</span>	<span>});
</span>
	grid<span>.infinitescroll({
</span>		<span>// Pagination element that will be hidden
</span>		<span>navSelector: '#pagination',
</span>
		<span>// Next page link
</span>		<span>nextSelector: '#pagination p a',
</span>
		<span>// Selector of items to retrieve
</span>		<span>itemSelector: '.grid-item',
</span>
		<span>// Loading message
</span>		<span>loadingText: 'Loading new items…'
</span>	<span>},
</span>
	<span>// Function called once the elements are retrieved
</span>	<span>function(new_elts) {
</span>		<span>var elts = $(new_elts).css('opacity', 0);
</span>
		elts<span>.animate({opacity: 1});
</span>		grid<span>.masonry('appended', elts);
</span>	<span>});
</span><span>});</span>

Schlussfolgerung

Wir haben sechs verschiedene Beispiele für die Implementierung von unendlichem Scrollen angesehen. Unabhängig davon, was Sie aufbauen möchten, sollten Sie in der Lage sein, eine dieser Techniken zu verwenden, um das gewünschte Ergebnis zu erzielen. Wie immer würden wir gerne Ihre Gedanken hören: Haben Sie mit einer dieser Plugins oder Techniken etwas Cooles aufgebaut? Haben Sie ein Lieblings -Plugin, von dem Sie denkt, dass sie hätte erwähnt werden sollen? Lassen Sie uns in den Kommentaren wissen!

häufig gestellte Fragen (FAQs) zu jQuery Infinite Scrolling

Wie kann ich JQuery Infinite Scrolling auf meiner Website implementieren? Zunächst müssen Sie die JQuery -Bibliothek und das Infinite Scroll -Plugin in Ihre HTML -Datei aufnehmen. Anschließend müssen Sie das Plugin initialisieren und den Inhalt angeben, den Sie unendlich laden möchten. Sie können dies tun, indem Sie die Option "ItemSelector" verwenden und auf die Klasse oder ID Ihres Inhalts verweisen. Schließlich müssen Sie den Pfad zum nächsten Inhaltssatz mit der Pfadoption angeben. Dies kann eine URL oder eine Funktion sein, die eine URL zurückgibt. Es verbessert die Benutzererfahrung, indem Benutzer inhaltlich durchsuchen können, ohne auf Pagination -Links klicken zu müssen. Es reduziert auch die Serverlast, da der Inhalt nur dann geladen wird, wenn er benötigt wird. Darüber hinaus kann es das Engagement und die Zeit erhöhen, die auf Ihrer Website aufgewendet werden, da Benutzer eher weiterhin scrollen und Ihre Inhalte erforschen. Sie können die Ladenachricht in JQuery Infinite Scrolling anpassen. Das Plugin bietet eine Option mit dem Namen Lade, mit der Sie den Text und die Bilder angeben können, während der Inhalt geladen wird. Sie können auch CSS verwenden, um die Ladenachricht zu stylen.

Wie kann ich Fehler in JQuery Infinite Scrolling umgehen? Diese Funktion wird aufgerufen, wenn das Plugin den Inhalt nicht lädt. Sie können diesen Rückruf verwenden, um eine Fehlermeldung anzuzeigen oder andere Aktionen zu ergreifen. Das Plugin bietet eine Methode namens INFSCR ('Bind'), die Sie aufrufen können, um die unendliche Bildlauffunktion an neu geladene Inhalte zu binden.

Sie können JQuery Infinite Scrolling stoppen, wenn kein Inhalt mehr vorhanden ist, indem Sie die InfsCR -Methode aufrufen. Dadurch werden die unendliche Bildlauffunktionalität entfernt und verhindern, dass weitere Inhalte geladen werden. . Sie müssen jedoch sicherstellen, dass die anderen Plugins mit unendlichem Scrollen kompatibel sind und ihre Funktionalität nicht beeinträchtigen. Durch Scrollen Ihrer Seite und überprüfen Sie, ob neue Inhalte geladen werden. Sie können auch Browser -Entwickler -Tools verwenden, um Netzwerkanforderungen zu überwachen und zu überprüfen, ob neue Inhalte korrekt angefordert und geladen werden. Funktioniert auf mobilen Geräten. Sie müssen jedoch sicherstellen, dass Ihre Website reagiert und dass die unendliche Bildlauffunktion in verschiedenen Bildschirmgrößen gut funktioniert. Die Leistung von Jquery Infinite Scrolling durch Optimierung Ihrer Inhalte. Dies beinhaltet die Reduzierung der Größe Ihrer Bilder, das Minimieren Ihrer CSS- und JavaScript-Dateien und die Verwendung der serverseitigen Pagination, um die Menge an Inhaltsaufnahme auf einmal zu begrenzen. Sie können auch Lazy Loading verwenden, um nur Bilder zu laden, wenn sie sich im Ansichtsfenster befinden.

Das obige ist der detaillierte Inhalt von6 JQuery Infinite Scrolling Demos. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php JavaScript jquery css html es6 Static String if for while include Error continue using class finally JS number function this display viewport column table idea kind SEO Other
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Einführung in Jcanvas: JQuery trifft HTML5 -LeinwandNächster Artikel：Einführung in Jcanvas: JQuery trifft HTML5 -Leinwand

In Verbindung stehende Artikel

Mehr sehen