Administrateur Systèmes d'Information mais aussi Développeur Web.
Passionné par plein de choses :)

Arnaud Bosquet

Administrateur Systèmes d'Information / Dev Web / Tennis

Comment faire un « infinite scroll » en jQuery

Il parait que c’est la tendance pour l’année 2011 : l’infinite Scroll. Beuh, qu’est-ce qui se cache derrière ce nom bizarre ?

L’infinite Scroll va charger du contenu pendant que la barre de défilement descend. Concrètement, ça permet aux utilisateurs de ne pas cliquer sur les liens « pages suivantes ». On allège aussi le chargement de ses pages en affichant uniquement le début.
On trouve ça sur les albums photos Facebook, les pages Tumblr, et autres…

Dans l’exemple ci-dessous, on va afficher les 5 derniers commentaires et avant d’arriver en fin de scroll, on charge les 5 suivants, etc…

1. Live Demo

2. Explications :

Index.php

<html>
<head>
<title>Infinite Scroll</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
 
$(document).ready(function(){ // Quand le document est complètement chargé
 
	var load = false; // aucun chargement de commentaire n'est en cours
 
	/* la fonction offset permet de récupérer la valeur X et Y d'un élément
	dans une page. Ici on récupère la position du dernier div qui 
	a pour classe : ".commentaire" */
	var offset = $('.commentaire:last').offset(); 
 
	$(window).scroll(function(){ // On surveille l'évènement scroll
 
		/* Si l'élément offset est en bas de scroll, si aucun chargement 
		n'est en cours, si le nombre de commentaire affiché est supérieur 
		à 5 et si tout les commentaires ne sont pas affichés, alors on 
		lance la fonction. */
		if((offset.top-$(window).height() <= $(window).scrollTop()) 
		&& load==false && ($('.commentaire').size()>=5) && 
		($('.commentaire').size()!=$('.nb_com').text())){
 
			// la valeur passe à vrai, on va charger
			load = true;
 
			//On récupère l'id du dernier commentaire affiché
			var last_id = $('.commentaire:last').attr('id');
 
			//On affiche un loader
			$('.loadmore').show();
 
			//On lance la fonction ajax
			$.ajax({
				url: './ajax_comment.php',
				type: 'get',
				data: 'last='+last_id,
 
				//Succès de la requête
				success: function(data) {
 
					//On masque le loader
					$('.loadmore').fadeOut(500);
					/* On affiche le résultat après
					le dernier commentaire */
					$('.commentaire:last').after(data);
					/* On actualise la valeur offset
					du dernier commentaire */
					offset = $('.commentaire:last').offset();
					//On remet la valeur à faux car c'est fini
					load = false;
				}
			});
		}
 
 
	});
 
});
 
</script>
<style>
body{
background:#ffffff;
}
/* Juste pour l'affichage, aucun intérêt ici ;) */
</style>
</head>
 
<body>
<div class="article">
	<div class="nb_com">
		25
	</div> commentaires
	<br /><br />
	Un article par exemple...
</div>
<div class="cont_com">
	Les commentaires sur l'article : 
 
	<?php
	$sql=mysql_query("SELECT * FROM commentaires
	ORDER BY id DESC LIMIT 5");
	while($data=mysql_fetch_assoc($sql))
	{
		// On affiche les commentaires avec l'ID comme attribut du div
	?>
		<div class="commentaire" id="<?php echo $data['id']?>">
			<?php echo $data['text_com']; ?>
		</div>
	<?php
	}
	?>
 
	<div class="loadmore">
		Chargement en cours...
	</div>
</div>
</body>
 
</html>

ajax_comment.php

<?php
$sql=mysql_query("SELECT * FROM commentaires WHERE 
id < ".mysql_real_escape_string($_GET['last'])." ORDER BY id DESC LIMIT 5");
while($data=mysql_fetch_assoc($sql))
{
?>
	<div class="commentaire" id="<?php echo $data['id']?>">
		<?php echo $data['text_com']; ?>
	</div>
<?php
}
?>

Note : jfefe est parti de ce code pour développer un plugin Spip. Vous pouvez le retrouver ici : http://www.spip-contrib.net/defilement-infini-sur-les-articles

57 commentaires

Simple idée
27 Oct 2014 à 21:20

Super ! C’est ce que je cherchais !
Merci ;-)

Majohnc
28 Oct 2014 à 15:13

slt,le script fonctionne très bien quand je me place sur une page entière. c est a dire dans window. mais je voudrais plutôt l adapter pour un div. et la je suis butté sur la de l événement scroll $(window).scroll(function()){..} en fait rien ne se passe. Quand j enlève ce fonction, mon scroll fonctionne une seule fois.
Ma question est de savoir comment faire pour déclencher l événement du scroll dans un div precisement et non pour tout le window?

Bernard Bass
31 Oct 2014 à 2:10

Même question que Majohnc

Vince
27 Jan 2016 à 13:54

Nikel c’est parfait :) merci !

lgdr design
8 Mar 2016 à 14:24

Hello,

Merci pour le code.

Aurais-tu une version plus récente avec d’éventuelles optimisation ?

J’ai pas trouver dans les commentaires pour la questions « Et si on na pas les elements dans une BDD » ? Pourrais-je avoir plus d’info stp a ce sujet. N’hésite pas a me contacter pas email.
J’ai un gros lancement de site ce soir , et ma page web met 6 secondes a s’afficher …

Gringo
14 Juin 2016 à 7:18

Bonjour,
Super code, merci.
J’ai juste une question : dans ma base, mes commentaires ont id_declaration comme classement et pas id. Et j’ai du mal à m’y retrouver entre les id de la base et ceux du div.
SI je remplace tous les id par id_declaration; le script me charge tous les commentaires après les 5 premiers et non 5 par 5 !
Pourriez vous me dire quels sont les id à changer ?

mohamed
11 Août 2016 à 16:17

merci mon ami

Répondre