- Front-end
- HTML| CSS| JavaScript| Vue.js
Latest Recommendations
-
Php8, I'm coming too
84669 person learning
- native foundation
- HTML| CSS| HTML5| CSS3| JavaScript
Latest Recommendations
-
Learn website layout in 30 minutes
152542 person learning
- Introduction to Fundamentals
- MySQL| SQL Server
Latest Recommendations
-
Shangguan Oracle Beginner to Proficient Video Tutorial
20005 person learning
Latest Recommendations
-
Your first line of UNI-APP code
5487 person learning
-
Flutter from scratch to app launch
7821 person learning
- Tool usage
- PhpStudy| Git| Other tools
Latest Recommendations
-
Brother Lian New Linux Video Tutorial
359900 person learning
Latest Recommendations
-
AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)
3350 person learning
-
Zero Basic Proficiency PS Video Tutorial
180660 person learning
-
16 day UI video tutorial to get you started
48569 person learning
-
PS Techniques and Slicing Techniques Video Tutorial
18603 person learning
- Class Library Classification
- HTTP| TCP/IP| basic programming
Latest Recommendations
-
Alibaba Cloud Environment Construction and Project Launch Video Tutorial
40936 person learning
-
Overview of Computer Networks - Basic Knowledge that Programmers Must Master
1549 person learning
-
Essential Tutorial for Programmers - HTTP Protocol Explanation
1183 person learning
-
Websocket Video Tutorial
32909 person learning
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
One strategy is to use cookies and intermediate pages. Redirect all requests to an intermediate page without a certain cookie, where we set the cookie.
Use apache htaccess or the equivalent in other servers without modifying the application's pages.
Check in htaccess whether the cookie (e.g. already loaded) exists, if not, redirect to "loading.html", set hasloading=true in "loading.html", and then redirect to the original URL.
It is very important to use javascript to redirect in "loading.html" because you will not get the expected results using HTTP redirects.
To show the loading image in "loading.html" you have to set cookie hasloading=true and then use onload event where you redirect to the original URL, in onload you do a small delay or the image (being Loading) ) will be frozen without moving in some browsers:
<script> window.onload = function() { setTimeout( function() { location.replace($ORIGIAL_URL.split('#')[0]); }, 60 ); }; </script>As the cookie expires, you can keep "loading.html" from reloading for days, hours, or minutes, depending on your needs. Another option is to set a cookie per URL.
I have similar implementations on several websites.
edit:
To illustrate strategy, rather than implementation, in this simple example we do not use htaccess and do the first redirect on the content page before loading the content.
Save as 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>Save as loading.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>This simple example even works in Firefox locally (file:// ...), in Chrome I doubt it works locally.