在页面加载时加载gif

Question

I have a site that where some pages run a number of php routines that can sometimes take some time. For example, from one page there is a form:

<form action ="showdata.php">
    <input type="submit">
</form>

Assume that the target page is:

connecting to a MySQL database
performing a series of select queries to establish the data to display 
preparing the resulting page with data displayed.

I have tried putting a loading gif on the target page but it only loads briefly once I suspect the queries have completed. To do this I have the following on the target page:

CSS

.loader {
top: 50%;
left: 50%;
width:6em;
height:6em;
margin-top: -3em; 
margin-left: -3em;
border: 0px solid #ccc;
background-color: #f3f3f3;
position:fixed;
background: url('../images/page-loader.gif') no-repeat;
}

SCRIPT

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function() {
    $(".loader").fadeOut("slow");
})
</script>

HTML

<div class="loader"></div>

How can I get the loading gif to be displayed correctly? IE as soon as the page is chosen. I seem to remember reading that you can get around this problem using an intervening page that displays the gif and then redirects to the target page. Is this the good way to solve this problem or is there a better way?

Answer 1

What you're going to want to do is add a loading gif to your page with the form and show it when the button is clicked. The target page will only load as soon as the server-side php stuff has been handled, so showing a loading bar as soon as you click will probably give the result you are looking for.

For example:

<script type="text/javascript">
$('.submit').on('click', function() {
    $(".loader").fadeIn("slow");
})
</script>