How to show loading gif while page hasn't fully loaded

Question

So I have one page called generate_schedule.php and within this page I have a form where they user selects from two drop downs and clicks submit (see image below):

This form POST's the start date and end date to another php called generate.php. At the moment loading generate.php takes about 1-2 minutes long as it is pulling a lot of information from multiple API's. While the page is loading I want to display a loading gif. Currently I have the following code for loading the next page:

<div class="se-pre-con"></div>
<style type="text/css">
.no-js #loader { display: none;  }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url(images/loading.gif) center no-repeat #fff;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.js"></script>
<script type="text/javascript">
    $(window).load(function() {
        $(".se-pre-con").fadeOut();
    });
</script>

However what this doe is that it only appears once generate.php has fully loaded for a few seconds. I have also tried

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script language="javascript" type="text/javascript">
     $(window).load(function() {
     $('.se-pre-con').hide();
  });
</script>

But this does not work either it also only appears for a slit second once the generate.php page has fully loaded

Basically what I want to happen is when I click generate schedule in generate_schedule.php, a loading gif appears while generate.phpis loading

Possible duplicate of [How to show a Prelaoder/Loading animation/gif/percentage while the included PHP page processes/loads?](http://stackoverflow.com/questions/6827699/how-to-show-a-prelaoder-loading-animation-gif-percentage-while-the-included-php) — secretgenes, Mar 29 '16 at 04:38
Possible duplicate of [How to show ajax loading gif animation while the page is loading?](http://stackoverflow.com/questions/1305260/how-to-show-ajax-loading-gif-animation-while-the-page-is-loading) — Satej S, Mar 29 '16 at 04:54

score 4 · Accepted Answer · answered Mar 29 '16 at 05:08

The reason why the gif is not showing until the generate.php is almost loaded is because when you click the submit button, the form is submitted to generate.php and you are no long on the generate_schedule.php. But the content is gonna take a long time to load, so the browser prefer to display the generate_schedule.php content at the moment, instead of displaying a blank page.

General approach is to put the loader on generate_schedule.php page instead on generate.php. Display the loader first when click the button, then submit the form, then the page will keep loading content while diplay the loader gif.

So here is something what I usually do: 1. add a hidden element on generate_schedule.php like:

<div id="loading"><img src="loading.gif" /></div>

with the css like (assuming the image is 60px width and 40px height):

#loading{
    position: fixed, 
    top: 0; left: 0; 
    width: 100%; height:100%; 
    background-color: rgba(255, 255, 255, 0.6); 
    z-index: 1000;
    display:none;
}
#loading img{
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -20px;
    margin-left: -30px;
}

Basically move the loader from generate.php to generate_schedule.php. then on the generate_schedule.php add javascript as:

$('#submitBtn').on('click', function(e){
    e.preventDefault();//prevent the form submit
    e.stopPropagation();// stop propagation
    $('#loading').show();
    $('#form').submit();
});

How to show loading gif while page hasn't fully loaded

1 Answers1