title: Loading gif on page loading
body: <p>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:</p>
  
  <pre><code>&lt;form action ="showdata.php"&gt;
      &lt;input type="submit"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Assume that the target page is:</p>
  
  <pre><code>connecting to a MySQL database
  performing a series of select queries to establish the data to display 
  preparing the resulting page with data displayed.
  </code></pre>
  
  <p>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:</p>
  
  <p>CSS</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>SCRIPT</p>
  
  <pre><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  $(window).load(function() {
      $(".loader").fadeOut("slow");
  })
  &lt;/script&gt;
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="loader"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>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?</p>