Comment déterminer la visibilité des divs .loading lors du chargement dynamique des données ?

Découverte de la visibilité des Divs .loading pour le chargement dynamique des données

Dans le développement Web à l'aide de jQuery, le chargement dynamique de plus de données lorsqu'un utilisateur fait défiler peut améliorer l’expérience utilisateur. Cependant, dans les scénarios avec plusieurs div .loading, identifier lequel est actuellement visible devient un défi.

Pour résoudre ce problème, il est essentiel de surveiller la position de défilement et de vérifier si le div .loading est visible. Une approche consiste à utiliser la fonction de défilement de jQuery. Au fur et à mesure que l'utilisateur fait défiler la page, cette fonction sera exécutée en continu.

Dans cette fonction, nous devons déterminer si l'utilisateur a atteint le bas de la page. Ceci peut être réalisé en comparant :

• $(window).scrollTop() : la position de défilement vertical de la fenêtre
• $(document).height() : la hauteur totale du document
• $(window).height() : La hauteur visible de la fenêtre

Lorsque la position de défilement est égale à la hauteur du document moins la hauteur visible, cela indique à l'utilisateur a défilé vers le bas.

Une fois cette condition remplie, un appel Ajax peut être effectué pour récupérer l'ensemble de données suivant du serveur. Cette requête doit être asynchrone pour éviter de geler l'interface utilisateur. En attendant la réponse, un indicateur de chargement peut être affiché à la place du div .loading.

Dès réception de la réponse du serveur, les données nouvellement acquises peuvent être ajoutées au div .loading approprié. Cela fournit de manière transparente des données supplémentaires au fur et à mesure que l'utilisateur fait défiler, garantissant une expérience utilisateur fluide et optimisée.

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!