PHP implémente le chargement par défilement infini

Avec le développement d'Internet, de plus en plus de pages Web doivent prendre en charge le chargement par défilement, et le chargement par défilement infini en fait partie. Il permet à la page de charger continuellement du nouveau contenu, permettant ainsi aux utilisateurs de naviguer sur le Web plus facilement. Dans cet article, nous présenterons comment implémenter le chargement par défilement infini à l'aide de PHP.

1. Qu'est-ce que le chargement par défilement infini ?

Le chargement par défilement infini est une méthode de chargement de contenu Web basée sur des barres de défilement. Son principe est que lorsque l'utilisateur fait défiler vers le bas de la page, les données d'arrière-plan sont récupérées de manière asynchrone via AJAX pour charger en continu du nouveau contenu. Cette méthode de chargement peut empêcher les utilisateurs de changer fréquemment de page et améliorer l'expérience utilisateur.

2. Avantages du chargement par défilement infini

1. Maîtrise : le chargement par défilement infini peut empêcher les utilisateurs de changer fréquemment de page, améliorant ainsi la fluidité des pages et l'expérience utilisateur.

2. Améliorer l'attractivité du contenu : le chargement par défilement infini peut afficher en permanence du nouveau contenu et inciter les utilisateurs à rester sur la page.

3. Réduisez la pression du serveur : le chargement paginé nécessite que les utilisateurs accèdent manuellement à la page, tandis que le chargement par défilement infini ne nécessite que des requêtes asynchrones pour le nouveau contenu, ce qui peut réduire la pression du serveur.

3. Étapes pour implémenter le chargement par défilement infini

1. Construisez la structure HTML

Tout d'abord, créez un conteneur dans la page pour afficher le chargement du nouveau contenu. Utilisez la structure suivante :

<div id="load-more-container">
  <!-- 初始内容 -->
</div>

2. Liez l'événement de défilement

Lorsque l'utilisateur fait défiler vers le bas de la page, il doit déclencher le chargement d'un nouveau contenu. Afin d'implémenter cette fonction, nous devons écouter l'événement de défilement de la fenêtre et déterminer s'il a défilé vers le bas de la page. Le code est le suivant :

  $(window).on('scroll', function () {
    if ($(window).scrollTop() + $(window).height() == $(document).height()) {
      loadMore();
    }
  });

Dans le code, la fonction loadMore est la fonction utilisée pour charger un nouveau contenu.

3. Chargement asynchrone des données

Lorsque l'utilisateur fait défiler vers le bas de la page, il doit demander l'arrière-plan de manière asynchrone pour obtenir un nouveau contenu. Ici, nous utilisons l’implémentation de la méthode AJAX de jQuery.

function loadMore() {
  $.ajax({
    type: 'GET',
    url: 'load-more.php',
    data: {
      //传递参数
    },
    success: function (data) {
         $('#load-more-container').append(data);
    }
  });
}

Parmi eux, load-more.php est le chemin du fichier pour le traitement des données en arrière-plan. Le prochain lot de données peut être obtenu via load-more.php et affiché si nécessaire.

4. Implémenter la pagination

Lors de la mise en œuvre du chargement par défilement infini, nous devons prêter attention à la pagination des données. Afin d'implémenter la pagination, nous pouvons ajouter une logique pertinente à load-more.php et obtenir les données correspondantes en fonction du nombre actuel de pages. Le code est le suivant :

$page = $_GET['page'];
$count = 10; // 每页条数
$start = ($page-1) * $count;

// 数据库查询语句
$sql = "SELECT * FROM `table` LIMIT $start, $count";

5. Résumé

Cet article présente comment utiliser PHP pour obtenir un chargement par défilement infini. En écoutant les événements de défilement et en demandant de manière asynchrone des données d'arrière-plan pour obtenir des données, nous pouvons réaliser un défilement infini et afficher les données dans les pages selon les besoins, améliorant ainsi la fluidité des pages et l'expérience utilisateur.

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!