Comment faire un « infinite scroll » en jQuery

Conseils, trucs et astuces pour progresser avec les différents langages de programmation.

Créer une réponse à ce sujet

Vous ne pouvez pas poster de nouveaux sujets
Vous ne pouvez pas répondre aux sujets
Vous ne pouvez pas éditer vos messages
Vous ne pouvez pas supprimer vos messages
Vous ne pouvez pas joindre des fichiers

partagepartagepartage
Il y a 2 messages dans cette section.
Page 1 sur 1
Créer un nouveau Sujet sur le Forum

Comment faire un « infinite scroll » en jQuery

Message :N°1  Message

par
» Sam 14 Oct 2017 16:22

Voici 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
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 ;)
  • 0

Avatar de l’utilisateur
GHS Team
 
Messages: 4592
Inscription: Dim 22 Déc 2013 16:17
Localisation: Europe & Asie
Réputation: 652
Récompenses: 12
Membre Contributeur (1) Protecteur de GHS Tools (1) Membre Financeur (1) + 100 Posts sur le Forum (1) + 200 Posts sur le Forum (1) Le meilleur Posteur (1) Traducteur (Anglais / Chinois) (1) Rédaction & Correction FR (1) Traducteur (Français /Anglais) (1) Développeur WEB (1)

Re: Comment faire un « infinite scroll » en jQuery

Message :N°2  Message

par
» Ven 20 Oct 2017 11:42

Super, merci, je regarde ce code !
  • 0

Avatar de l’utilisateur
Contributeur
 
Messages: 436
Inscription: Ven 28 Oct 2016 22:09
Localisation: France
Réputation: 245
Récompenses: 4
Membre Contributeur (1) Protecteur de GHS Tools (1) + 100 Posts sur le Forum (1) + 200 Posts sur le Forum (1)


Répondre à ce sujet du Forum

Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 6 invités

Retourner vers Programmation



 


  • Sujets similaires
    Réponses
    Vus
    Dernier message