- L'extrémité avant
- HTML| CSS| JavaScript| Vue.js
Dernières recommandations
-
Php8, je viens aussi
84669 personnes étudient
- fondation autochtone
- HTML| CSS| HTML5| CSS3| JavaScript
Dernières recommandations
-
Apprenez la mise en page d'un site Web en 30 minutes
152542 personnes étudient
- Introduction aux fondamentaux
- MySQL| SQL Server
Dernières recommandations
-
Tutoriel vidéo Shangguan Oracle débutant à compétent
20005 personnes étudient
Dernières recommandations
-
Votre première ligne de code UNI-APP
5487 personnes étudient
-
Flutter de zéro au lancement de l'application
7821 personnes étudient
- Utilisation de l'outil
- PhpStudy| Git| Autres outils
Dernières recommandations
-
Brother Lian Nouveau didacticiel vidéo Linux
359900 personnes étudient
Dernières recommandations
-
-
Tutoriel vidéo PS Zero Basic Proficiency
180660 personnes étudient
-
Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer
48569 personnes étudient
-
Tutoriel vidéo sur les techniques PS et les techniques de découpage
18603 personnes étudient
- Classification de la bibliothèque de classes
- HTTP| TCP/IP| programmation de base
Dernières recommandations
-
Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment
40936 personnes étudient
-
-
Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP
1183 personnes étudient
-
Tutoriel vidéo Websocket
32909 personnes étudient
![[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.