Implémentation de défilement infini dans jQuery

Résumé des points clés

• Le défilement infini (également appelé chargement paresseux ou pas de pagination) est une alternative à la pagination, qui charge de nouveaux contenus via Ajax lorsque l'utilisateur termine le défilement du contenu existant sur la page.
• Bien que le défilement infini présente de nombreux avantages, il présente également certains inconvénients, comme le fait de ne pas pouvoir économiser des emplacements dans le flux et de ne pas être adapté aux moteurs de recherche. Pour éviter les problèmes avec les moteurs de recherche, des alternatives avec la pagination ou des sites doivent être fournies.
• La mise en œuvre de défilement infini comprend la création de dispositions de base HTML et CSS, la configuration du mode AJAX pour le traitement des demandes, l'ajout de nouvelles données sur la page et la fin des données de traitement.
• L'implémentation de défilement infini peut être encore améliorée en supprimant le bouton et en appelant la fonction lorsque l'utilisateur défile jusqu'à la fin de la page, en envoyant des données brutes via JSON et en créant une balise en utilisant jQuery elle-même, et en incluant un message dans La réponse JSON, expliquez si la demande a été terminée correctement et s'il y a plus de messages à charger.

Les développeurs Web se tournent depuis longtemps vers la pagination traditionnelle lorsqu'il y a beaucoup de contenu à afficher. Oui, la pagination est toujours un moyen très efficace d'afficher du contenu, mais dans cet article, nous discuterons d'une alternative - un défilement infini. Cette technique est également appelée chargement paresseux ou pas de pagination, et lorsque l'utilisateur termine le défilement du contenu existant sur la page, il charge le nouveau contenu via Ajax. Certains géants de l'Internet, y compris Facebook et Pinterest, utilisent un défilement illimité. Dans cet article, nous discuterons de la construction de votre propre plugin jQuery pour le défilement infini.

Traders and Downs

Les avantages sont évidents. Pour obtenir plus de contenu, vous n'avez pas besoin de rediriger vers une nouvelle page (cela a tendance à déplacer votre attention vers différents domaines lorsque la page se charge). En implémentant le défilement infini, vous pouvez essentiellement contrôler l'accent mis par l'utilisateur sur la page! Le défilement infini n'est pas efficace dans tous les cas. Par exemple, si l'utilisateur clique sur un lien et utilise le bouton de retour du navigateur, l'utilisateur perd l'emplacement dans le flux de données chargé via AJAX. Une chose que vous devez noter lors de l'implémentation de cette fonction est de charger un nouveau contenu dans un nouvel onglet ou une nouvelle fenêtre. L'inconvénient connexe de la défilement infini est qu'il ne peut pas sauver l'emplacement dans le flux. Supposons que vous souhaitiez partager du contenu sur la page de défilement illimitée avec des amis par e-mail. Vous ne pouvez pas le faire car l'URL vous ramènera à l'emplacement initial. Ainsi, avant de décider de continuer à l'utiliser, considérez la disponibilité de votre site Web. N'oubliez pas non plus qu'il n'est pas très adapté aux moteurs de recherche avant d'implémenter le défilement infini. Pour éviter tout problème avec la visibilité du moteur de recherche, assurez-vous de fournir une alternative avec une pagination ou un plan de site.

Démarrer

Nous allons commencer par créer une page très simple. Ce qui suit montre les parties importantes de l'exemple HTML et CSS. Le reste des fichiers peut être affiché en cliquant sur le lien de démonstration à la fin de ce tutoriel.

html

<code class="language-html"><div id="data-container">
  <div class="data-item">
    Hi! I am the first item.
  </div>
  <div class="data-item">
    Hi! I am the second item.
  </div>
  <div class="data-item">
    Hi! I am the third item.
  </div>
  <div class="data-item">
    Ok, this is getting boring.
  </div>
  <div class="data-item">
    Let's try something new.
  </div>
  <div class="data-item">
    How about loading some more items through AJAX?
  </div>
  <div class="data-item">
    Click the button below to load more items.
  </div>
</div>
<div id="button-more" onclick="lazyload.load()">
  Load more items
</div>
<div id="loading-div">
  loading more items
</div></code>

CSS

<code class="language-css">#data-container {
  margin: 10px;
}

#data-container .data-item {
  background-color: #444444;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  padding: 5px;
  margin: 5px;
  color: #fff;
}

#loading-div {
  display: none;
}

#button-more{
  cursor: pointer;
  margin: 0 auto;
  background-color: #aeaeae;
  color: #fff;
  width: 200px;
  height: 50px;
  line-height: 50px;
}</code>

flux de travail de base

Si vous affichez le document que nous avons créé, les nouveaux messages doivent être chargés lorsque vous cliquez sur le bouton charger plus. Voici quelques points à considérer.

• Les demandes doivent être faites à l'URL qui renvoie le nouvel élément à joindre à la page.
• Si vous cliquez à nouveau sur le bouton, ce processus doit être répété, mais la deuxième fois, vous devez retourner un article plus récent.
• De nouveaux messages doivent être fournis pour chaque demande ultérieure jusqu'à ce qu'aucun plus de messages ne doit être affiché.
• Lorsqu'il ne reste plus de messages, vous devez dire à l'utilisateur qu'il a atteint la fin.

mode ajax

Idéalement, vous devez déclarer une variable pour stocker le numéro de page, qui à son tour modifie l'URL à laquelle vous souhaitez envoyer la demande. Dans notre démo, nous avons trois de ces pages - 2.html, 3.html et un 4.html vide (à des fins de démonstration). Lorsque vous cliquez sur le bouton pour charger plus de messages, il faut un certain temps avant la fin de la demande et charge un nouveau projet. Dans ce cas, nous masquerons le bouton de chargement et afficherons un texte indiquant que le nouveau projet se charge:

<code class="language-html"><div id="data-container">
  <div class="data-item">
    Hi! I am the first item.
  </div>
  <div class="data-item">
    Hi! I am the second item.
  </div>
  <div class="data-item">
    Hi! I am the third item.
  </div>
  <div class="data-item">
    Ok, this is getting boring.
  </div>
  <div class="data-item">
    Let's try something new.
  </div>
  <div class="data-item">
    How about loading some more items through AJAX?
  </div>
  <div class="data-item">
    Click the button below to load more items.
  </div>
</div>
<div id="button-more" onclick="lazyload.load()">
  Load more items
</div>
<div id="loading-div">
  loading more items
</div></code>

attacher des données à la page

Tout d'abord, nous devons annuler les modifications que nous avons effectuées lorsque la demande est effectuée, c'est-à-dire afficher à nouveau le bouton de chargement plus et masquer le texte. Deuxièmement, nous devons ajouter la réponse que nous recevons à la liste des éléments qui existent déjà sur la page. Notez que dans la démo, nous recevons directement des balises HTML pour simplifier les opérations. Vous pouvez également envoyer une réponse JSON, ajoutant plus de variables, telles que les messages ou l'état. Le code supplémentaire est illustré ci-dessous.

<code class="language-css">#data-container {
  margin: 10px;
}

#data-container .data-item {
  background-color: #444444;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  padding: 5px;
  margin: 5px;
  color: #fff;
}

#loading-div {
  display: none;
}

#button-more{
  cursor: pointer;
  margin: 0 auto;
  background-color: #aeaeae;
  color: #fff;
  width: 200px;
  height: 50px;
  line-height: 50px;
}</code>

Fin des données de traitement

Une fois que vous avez atteint la fin de la publication, vous devez montrer à l'utilisateur qu'il n'y a plus de messages à charger sur la page. Cela peut être fait de plusieurs façons. Nous pouvons envoyer des états via du code ou des messages intégrés dans la réponse elle-même. Cependant, comme nous utilisons directement des balises HTML dans ce cas, la réponse vide représente la fin du flux.

<code class="language-javascript">$(buttonId).hide();
$(loadingId).show();</code>

Conclusion

La démonstration que nous avons proposée est de nature très basique et nous pouvons faire mieux si nous faisons plus d'efforts. Tout d'abord, nous pouvons supprimer complètement le bouton et appeler la fonction lorsque l'utilisateur fait défiler jusqu'à la fin de la page. Cela éliminera l'étape supplémentaire pour que l'utilisateur clique sur le bouton et facilitera l'ensemble du processus. Deuxièmement, nous pouvons simplement envoyer des données brutes via JSON et créer des balises à l'aide de jQuery elle-même. Par exemple:

<code class="language-javascript">$(buttonId).show();
$(loadingId).hide();
$(response).appendTo($(container));
page += 1;</code>

Enfin, la réponse JSON peut contenir un message selon lequel la demande est terminée correctement, les données, et s'il y a plus de messages à charger. Dans ce cas, il s'agit d'un moyen plus efficace d'envoyer une réponse. Pour plus d'informations sur le défilement illimité, vous pouvez visiter des sites Web créés spécifiquement à cet effet. Il contient des informations générales sur l'idée et les outils existants que vous pouvez utiliser sur le site Web pour les implémenter. Une démo en direct peut être trouvée sur la page GitHub. Le code est également disponible sur GitHub.

(La partie FAQ est omise ici parce que l'article est trop long et ne correspond pas à l'objectif pseudo-original. Le contenu de la partie FAQ est fortement coïncide Après modification, cela affectera l'intégrité de l'article et logique.

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!