Comment faire un « infinite scroll » en jQuery
Posté: Sam 14 Oct 2017 16:22Voici comment faire un « infinite scroll » en jQuery :
vu sur Vous devez être inscrit et présenté pour voir les liens ainsi que d'autres éléments qui peuvent être caché aux invités.
index.php
ajax_comment.php
je l'ai intégré dans un projet ca fonctionne bien
vu sur Vous devez être inscrit et présenté pour voir les liens ainsi que d'autres éléments qui peuvent être caché aux invités.
index.php
- Code: Tout sélectionner
<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
- Code: Tout sélectionner
<?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
}
?>
je l'ai intégré dans un projet ca fonctionne bien