J'ai un tas de pages .php, chacune correspondant à une page web html. Chaque page prend environ une minute environ pour être entièrement traitée et chargée. Je souhaite montrer une image de chargement à l'utilisateur lorsque la page est complètement chargée.
J'ai pensé à une manière logique de charger d'abord l'image et le contenu principal reste caché pendant le traitement du .php ; une fois le php chargé, il peut faire écho à un élément qui agit comme un déclencheur pour le JavaScript qui ajoutera le fichier principal. le style d'affichage du contenu passe de masqué à bloqué. Mais je ne peux pas l'exécuter car je suppose qu'Apache doit charger php avant de pouvoir afficher une sortie.
Une autre option que j'ai vue était de changer la page entière et d'utiliser ajax pour charger les données, mais je suis un peu paresseux de le faire car cela impliquerait de réécrire tout le code .php.
J'espère que quelqu'un pourra me guider sur ce que je fais de mal ou s'il existe un moyen plus efficace d'accomplir cette tâche.
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Une stratégie consiste à utiliser des cookies et des pages intermédiaires. Redirigez toutes les demandes vers une page intermédiaire sans cookie spécifique, où nous définissons le cookie.
Utilisez Apache htaccess ou équivalent sur d'autres serveurs sans modifier les pages de votre application.
Vérifiez dans htaccess si le cookie (par exemple déjà chargé) existe, sinon, redirigez vers "loading.html", définissez hasloading=true dans "loading.html", puis redirigez vers l'URL d'origine.
Il est très important d'utiliser javascript pour rediriger dans "loading.html" car en utilisant la redirection HTTP vous n'obtiendrez pas les résultats escomptés.
Pour afficher l'image de chargement dans "loading.html", vous devez définir le cookie hasloading=true, puis utiliser l'événement onload où vous redirigez vers l'URL d'origine, dans onload, vous faites un petit délai ou l'image (en cours de chargement)) sera gelée sans déplacement dans certains navigateurs :
<script> window.onload = function() { setTimeout( function() { location.replace($ORIGIAL_URL.split('#')[0]); }, 60 ); }; </script>À l'expiration du cookie, vous pouvez empêcher "loading.html" de se recharger pendant des jours, des heures ou des minutes selon vos besoins. Une autre option consiste à définir un cookie par URL.
J'ai des implémentations similaires sur plusieurs sites Web.
Éditeur :
Pour illustrer la stratégie, plutôt que la mise en œuvre, dans cet exemple simple, nous n'utilisons pas htaccess et effectuons la première redirection sur la page de contenu avant de charger le contenu.
Enregistrer sous index.html :
<!DOCTYPE html> <html lang=""> <head> <title>Content</title> </head> <body> <script> // check if a cookie exists if (!document.cookie.match(/^(.*;)?\s*loading\s*=\s*[^;]+(.*)?$/)) { location.replace('loading.html'); } </script> <h1>Content</h1> </body> </html>Enregistrer sous chargement.html :
<!DOCTYPE html> <html lang=""> <head> <title>Loading</title> </head> <body> <h1>Loading...</h1> <script> // set cookie document.cookie = "loading=1;0;path=/"; // redirect window.onload = function() { setTimeout( function() { location.replace('index.html'); }, 2000 ); }; </script> </body> </html>Cet exemple simple fonctionne même dans Firefox localement (fichier://...), dans Chrome, je doute qu'il fonctionne localement.