Comment faire un « infinite scroll » en jQuery

Publié par Arnaud le 3 fév 2011 dans Développement

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


15 commentaires

Leene
26 avr 2011 à 15:39

Bonjour

J’ai essayé d’appliquer ce script sur une page html toute bete mais du coup je me demandais s’il fallait absolument une bdd pour que cela charge au fur et à mesure ou bien on peut lui dire de charger telle page quand le scrolling est en bas ?

Cordialement

Leene


 
Kamel
27 mai 2011 à 20:05

Leene,

Effectivement, tu pourrais charger une page tout simplement.


 
billboc
5 juil 2011 à 12:55

salut!
est-ce facilement utilisable sur un blog wordpress ?
j’ose pas me lancer…


 
Kamel
5 juil 2011 à 14:52

@billboc : Oui tu peux le faire, faut juste que tu remplace le code php du tuto par celui de wordpress et adapter le CSS du tuto à ton template.


 
billboc
5 juil 2011 à 16:04

Merci Kamel
j’attend les vacances pour tester ça tranquillement sur mon blog perso !


 
Arnaud
6 juil 2011 à 8:21

Oui dans ton template Wordpress (surement dans la page index.php), tu vas avoir un code permet d’avoir la pagination (suivant – précédent ou n° de page). Tu dois remplacer le code ici.

Sinon, il existe des plugins tout fait pour wordpress qui permettent de faire ça sans le moindre effort. A toi de voir dans quel chemin tu veux te lancer ;)


 
zebul666
6 juil 2011 à 11:25

j’ai déjà fait ça.
La question que je me pose en ce moment c’est comment faire pour que le navigateur cache la page modifé et non la page original
et qu’il présente donc la page modifé (avec tous les commentaires) quand on revient en arrière dans l’historique et non pas la page original

j’ai regardé du coté de window.location.hash ou history.replaceState mais j’arrive pas à ce que je veux


 
zebul666
6 juil 2011 à 12:50

ça marche (sans rien faire) pour les navigateurs utilisant un bfcache comme firefox et opera. pas chrome/chromium/safari et IE (au moins 8)


 
Arnaud
9 juil 2011 à 20:58

Sinon une des solutions envisageables était de mettre à jour le hash de ton adresse au moment du chargement des commentaires supplémentaires.
http://tonsite.com/commentaire#5 pour 5 commentaires supplémentaires
http://tonsite.com/commentaire#10 pour 10 commentaires supplémentaires
etc…

Au moment de revenir sur ta page, tu pourrais faire un test et tester justement le hash qui est défini après l’url de ta page et charger les com’ en questions via du php.

Un autre problème possible est la gestion des hash sur des navigateurs comme IE mais là c’est une autre difficulté :D


 
Julien
22 juil 2011 à 1:20

Très bon ce code, bien détaillé, tout ce qu’il faut :)
Mais pour l’utiliser sans bdd (dans une page php qui affiche toutes les images d’un dossier, pour charger par exemple les images 10 par 10), je fais comment ?


 
Pat
5 août 2011 à 7:25

Très sympa de trouver un tuto en français. Merci. Aurais tu une piste pour gérer un effet rebond comme sur twitter et également le gérer sur iPad. Merci


 
Arnaud
16 août 2011 à 10:28

Qu’est ce que tu appelles un « effet rebond » ?

Pour le gérer sur l’iPad, une version spéciale du framework jQuery vient de sortir pour les appareils mobiles. Ca doit fonctionner avec.


 
Loiseau2nuit does SEO
24 août 2011 à 12:22

Moi j’ai une question, d’un point de vue référencement, les moteurs de recherches voient quoi eux, lorsqu’ils crawlent la page ???


 
Arnaud
25 août 2011 à 9:06

D’un point de vue référencement, un moteur de recherche n’a pas de javascript d’activer. Il ne verra donc que les 5 premiers résultats et c’est tout.

Ce qu’il est possible et conseillé de faire, c’est d’ajouter une balise avec dedans des liens de pagination (résultats suivant/précédent).

Le visiteur aura un effet sympa dans son navigateur, le moteur de recherche verra une pagination classique type blog ou autre.


 
Loiseau2nuit
25 août 2011 à 11:14

OK merci pour ce retour.

Reste plus qu’à optimiser ses pagin’ alors… M’en vais repartir lire Ramenos moi tiens… ;)

http://blog.ramenos.net/referencement/gerer-la-pagination-de-son-site-au-niveau-seo/


 

Répondre

Copyright © 2012 Arnaud Bosquet.
Theme signé Laptop Geek. Modifié par moi. Traduction WordPress tuto.