recherche

Maison >interface Web >js tutoriel >6 démos de défilement Infini JQuery

6 démos de défilement Infini JQuery

Jennifer Aniston
Jennifer Anistonoriginal
2025-02-18 10:09:10761parcourir

6 démos de défilement Infini JQuery

Le défilement infini est désormais une caractéristique commune et il y a plusieurs cas où il est vraiment utile. Par exemple, il existe des sites Web où nous ne pouvons tout simplement pas imaginer un bon système de pagination, comme Twitter ou même Facebook. Un autre exemple de l'endroit où le défilement infini peut être utile pour un moteur de recherche: vous voudrez continuer à consulter de nouveaux liens pendant que vous ne trouvez pas celui que vous voulez, et un système de pagination peut vous ralentir dans votre recherche. Si vous devez utiliser le défilement infini pour votre projet, voici six démos que vous pouvez utiliser comme inspiration pour la mettre en œuvre. Notez que, à l'exception du dernier, toutes ces démos sont écrites avec jQuery et que certains exemples utilisent des plugins jQuery. Cependant, d'autres exemples peuvent facilement être adaptés à la vanille JS sans aucun problème.

Les plats clés

  • L'article présente six démos sur la façon d'implémenter le défilement infini, une fonctionnalité qui permet de faire défiler continu le contenu sans avoir à cliquer sur des liens de pagination, à améliorer l'expérience utilisateur et l'engagement.
  • Les démos incluent le défilement infini à travers les grilles, les articles de blog, les images, les nombres, les feuilles de calcul et une combinaison de défilement infini et de pagination. Chaque démo est écrite en jQuery, bien qu'elles puissent être adaptées à Vanilla JS, et certains utilisent des plugins jQuery.
  • L'implémentation de défilement infini peut être personnalisée en fonction des besoins du projet, tels que l'ajustement du message de chargement, la gestion des erreurs, le travail avec du contenu dynamique, l'arrêt en cas de plus de contenu et l'amélioration des performances en optimisant le contenu.

1. Défilement et grilles infinies

Cette démo utilise le plugin de maçonnerie JQuery avec le plugin de défilement infini. Le plugin de maçonnerie est bon pour obtenir des dispositions de grille fluide. Le plugin de défilement infini par Paul Irish est bon pour charger des pages qui existent déjà (donc c'est bon pour votre référencement). Vous pouvez l'utiliser pour charger des pages statiques telles que page2.html, page3.html, etc., mais ce plugin gère également des pages générées, telles que page.php? P = 2, page.php? P = 3. Cependant, pour l'utiliser, vous devez avoir un numéro de page pour augmenter votre URL, donc si vous avez des pages telles que page.php? Data = xxx, alors ce plugin n'est pas pour vous.

Utilisation - 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>

Utilisation - 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. Infini défiler dans les articles de blog

Cette démo n'utilise aucun plugin ou bibliothèque pour gérer la fonction de défilement infinie. Chaque fois que la fin de la page est atteinte par l'utilisateur, il charge un nouveau message, généré par un script PHP qui fait écho au code HTML correspondant. La démo n'atteint jamais la fin du contenu, mais vous pouvez y parvenir, par exemple, en faisant écho à une chaîne vide lorsqu'il n'y a plus de messages à afficher. Nous affichons une image de chargement à la fin de la page, dans l'esprit de Twitter.

Notez que, dans la démo en direct ci-dessous, les nouveaux messages sont générés par une fonction JavaScript, car nous ne pouvons pas utiliser un script PHP dans Codepen.

Voir le stylo infini par défiler les articles de blog par SitePoint (@SitePoint) sur Codepen.

Utilisation - 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>

Utilisation - 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. Infini défiler à travers les images

Cette démo se charge dans des images sur un parchemin infini et n'atteint jamais la fin. Il utilise le plugin JQuery Endless Scroll qui peut être personnalisé pour déclencher le chargement x nombre de pixels en bas de l'écran. La démonstration clones les mêmes images et les insère à la fin de la liste et ainsi de suite, mais le script peut être personnalisé pour charger les images de différentes sources.

Voir le stylo infini à faire défiler les images par SitePoint (@SitePoint) sur Codepen.

Utilisation - 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>

Utilisation - 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. Liste infinie des nombres

Cette démo utilise le même plugin que la précédente, mais nous avons appliqué le défilement infini sur une liste avec sa propre barre de défilement verticale. Au fur et à mesure que vous faites défiler les chiffres, les chiffres sont simplement ajoutés comme éléments de liste.

Voir le stylo une liste infinie de nombres par SitePoint (@SitePoint) sur Codepen.

Utilisation - 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>

Utilisation - 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. Feuilles de calcul infinies

Cette démo utilise la même technique que la démo 2 pour détecter lorsque l'utilisateur a atteint la fin du document, non seulement verticalement mais aussi horizontalement. Chaque fois qu'une extrémité est atteinte, nous ajoutons une nouvelle ligne ou une nouvelle colonne à la table. C'est exactement le type de script que nous pourrions écrire si nous voulons créer une application de feuilles de calcul.

Notez que toutes les cellules sont vides. Les index de lignes et de colonnes sont générés avec des compteurs CSS afin que nous n'ayons pas besoin de les calculer par nous-mêmes.

Voir les feuilles de calcul infinies du stylo par SitePoint (@SitePoint) sur Codepen.

Utilisation - 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>

Utilisation - 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. Pagination de défilement infinie

Il y a des inconvénients contre le défilement infini: s'il n'est pas bien implémenté, l'expérience utilisateur peut être rompue. Si vous laissez l'utilisateur charger une liste infinie, il peut perdre sa place après un certain temps. C’est une chose qui n’ajoute jamais avec un système de pagination traditionnel. Cependant, la pagination nécessite des actions de l'utilisateur qui ne sont pas nécessaires avec le défilement infini.

Ces deux faits ont donné à Tim Severien une idée: que se passe-t-il si nous combinions de défilement et de pagination infinis, pour profiter des deux méthodes? Le résultat est cette dernière démo.

Une page initiale est affichée à l'utilisateur. Lorsque l'utilisateur défile vers le bas et atteint le bas de la page, une nouvelle page est chargée automatiquement. Ici, nous apprécions la simplicité de la défilement infini. Mais les nouvelles choses proviennent d'une liste fixée en bas de l'écran.

initialement caché, cette liste est remplie, chaque fois qu'une nouvelle page est chargée, avec le numéro de cette page. De cette façon, si l'utilisateur souhaite récupérer la deuxième page, il peut sans aucun effort en frappant le numéro correspondant.

Voir la pagination de défilement infinie du stylo par SitePoint (@SitePoint) sur Codepen.

Utilisation - 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>

Utilisation - JavaScript

Veuillez noter que ce code utilise ES6, mais vous pouvez facilement le convertir en es5. 

<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>

Conclusion

Nous avons examiné six exemples différents de la mise en œuvre de défilement infini. Peu importe ce que vous essayez de construire, vous devriez être en mesure d'utiliser l'une de ces techniques pour atteindre le résultat que vous souhaitez. Comme toujours, nous aimerions entendre vos pensées: avez-vous construit quelque chose de cool avec l'un de ces plugins ou techniques? Avez-vous un plugin préféré qui, selon vous, aurait dû être mentionné? Faites-nous savoir dans les commentaires!

Les questions fréquemment posées (FAQ) sur JQuery Infinite font défiler

Comment puis-je implémenter JQuery Infinite Rcrolling sur mon site Web?

La mise en œuvre de JQuery Infinite La défilement sur votre site Web implique quelques étapes. Tout d'abord, vous devez inclure la bibliothèque JQuery et le plugin de défilement infini dans votre fichier HTML. Ensuite, vous devez initialiser le plugin et spécifier le contenu que vous souhaitez charger à l'infini. Vous pouvez le faire en utilisant l'option ItemSeLelector et en le pointant vers la classe ou l'ID de votre contenu. Enfin, vous devez spécifier le chemin d'accès à l'ensemble suivant de contenu à l'aide de l'option de chemin. Il peut s'agir d'une URL ou d'une fonction qui renvoie une URL.

Quels sont les avantages de l'utilisation de défilement de jQuery Infini?

jQuery Infinite Le défilement offre plusieurs avantages. Il améliore l'expérience utilisateur en permettant aux utilisateurs de parcourir le contenu sans avoir à cliquer sur les liens de pagination. Il réduit également la charge du serveur car le contenu n'est chargé que lorsqu'il est nécessaire. De plus, il peut augmenter l'engagement et le temps passé sur votre site Web, car les utilisateurs sont plus susceptibles de continuer à faire défiler et à explorer votre contenu.

Puis-je personnaliser le message de chargement dans JQUERY Infinite Recrolling?

Oui , vous pouvez personnaliser le message de chargement dans JQuery Infinite Scrolling. Le plugin offre une option appelée chargement, qui vous permet de spécifier le texte et les images à afficher pendant le chargement du contenu. Vous pouvez également utiliser CSS pour styliser le message de chargement.

Comment puis-je gérer les erreurs dans JQuery Infinite Scrolling?

Les erreurs de gestion dans JQuery Infinite Scrolling peuvent être effectuées en utilisant le rappel d'erreur. Cette fonction est appelée lorsque le plugin ne charge pas de contenu. Vous pouvez utiliser ce rappel pour afficher un message d'erreur ou prendre d'autres actions.

Puis-je utiliser JQuery Infinite défilement avec du contenu dynamique?

Oui, le défilement infini jQuery peut être utilisé avec un contenu dynamique. Le plugin fournit une méthode appelée infscr ('bind'), que vous pouvez appeler pour lier la fonctionnalité de défilement infinie au contenu nouvellement chargé.

Comment puis-je arrêter jQuery Infinite Recrolling lorsqu'il n'y a plus de contenu?

Vous pouvez arrêter JQuery Infinite Rcrolling lorsqu'il n'y a plus de contenu en appelant la méthode InfScr ('Détroo'). Cela supprimera la fonctionnalité de défilement infinie et empêchera que d'autres contenus soient chargés.

Puis-je utiliser le défilement JQuery Infinite avec d'autres plugins jQuery?

Oui, le défilement infinier jQuery peut être utilisé avec d'autres plugins jQuery . Cependant, vous devez vous assurer que les autres plugins sont compatibles avec le défilement infini et n'interfèrent pas avec ses fonctionnalités.

Comment puis-je tester jQuery Infinite Scrolling?

Vous pouvez tester jQuery Infinite Scrolling Infini En faisant défiler votre page et en vérifiant si le nouveau contenu est chargé. Vous pouvez également utiliser des outils de développeur de navigateur pour surveiller les demandes du réseau et vérifier si un nouveau contenu est demandé et chargé correctement.

Puis-je utiliser JQuery Infinite Scrolling sur les appareils mobiles?

Oui, jQuery Infinite Scrolling Fonctionne sur les appareils mobiles. Cependant, vous devez vous assurer que votre site Web est réactif et que la fonctionnalité de défilement infinie fonctionne bien sur différentes tailles d'écran.

Comment puis-je améliorer les performances de JQuery Infinite Rcrolling?

Vous pouvez améliorer Les performances de JQuery Infinite font défiler en optimisant votre contenu. Cela inclut la réduction de la taille de vos images, la mini-dimension de vos fichiers CSS et JavaScript et l'utilisation de la pagination côté serveur pour limiter la quantité de contenu chargé à la fois. Vous pouvez également utiliser le chargement paresseux pour charger des images uniquement lorsqu'ils sont dans la fenêtre.

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!

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
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Introduction à JCanvas: JQuery rencontre HTML5 CanvasArticle suivant：Introduction à JCanvas: JQuery rencontre HTML5 Canvas

Articles Liés

Voir plus