How to show loader for a php page?-CodePudding

I have a bunch of .php pages, each of these echos a html web page. It takes about a minute or so to completely process and load each page. I want to show users a loading image while the page loads completely.

I have thought of a way logically as like first a image loads and main content remains hidden, while .php is processing; once php loading completes it can echo an element which act as an trigger for javascript to change display style of main content from hidden to block. But I am not able to execute it; as I guess apache requires the loading of php to complete before it show any output.

Another option I see is changing whole page and load data using ajax, but I am a bit lazy to do so because it wll involve rewriting all the .php codes.

I am hoping if anyone can guide me through what I am doing wrong or if there is more efficient way of doing this task.

CodePudding user response：

One strategy is to use cookies and an intermediate page. Redirect all requests to the intermediate page that do not have a certain cookie, in the intermediate page we set the cookie.

Using apache htaccess, or its equivalent in other servers, it would not be necessary to modify the page of your application.

In htaccess you check if a cookie (for example alreadyloading) exists, if it does not exist you make a redirection to "loading.html" and in "loading.html" you set alreadyloading=true, and you make a redirection to the original URL.

It is important that you make the redirection in "loading.html" using javascript, because with an HTTP redirection you will not get the expected result.

In "loading.html" you show the loading image, you will have to set the cookie alreadyloading=true, then using the onl oad event you redirect to the original URL, in onl oad you make a small delay or the image (loading) will be frozen without moving in some browsers:

    <script>
        window.onload = function() {
            setTimeout( function() {
                location.replace($ORIGIAL_URL.split('#')[0]);
            }, 60 );
        };        
    </script>

With the cookie expiration you can make "loading.html" not reload for days, hours or minutes depending on your needs. Another option would be to set a cookie for each URL.

I have a similar implementation on several sites.

Edit:

To illustrate the strategy, not the 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 will work even in firefox locally (file:// ...) in chrome I doubt it works locally.