I have a bunch of .php pages, each corresponding to an html web page. Each page takes about a minute or so to fully process and load. I want to show a loading image to the user when the page is fully loaded.
I logically thought of a way like loading the image first and the main content stays hidden while the .php is being processed; once the php is loaded it can echo an element which acts as a trigger for JavaScript, Change the display style of the main content from hidden to block. But I can't execute it; because I guess apache needs to load php before it can show any output.
Another option I saw was to change the entire page and use ajax to load the data, but I'm a bit lazy to do that since that would involve rewriting all the .php code.
I'm hoping someone can guide me on what I'm doing wrong or if there is a more efficient way to accomplish this task.
P粉5584781502024-01-11 00:13:41
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.