title: Fake loading/progress bar for slow non-Ajax page
body: <p>I'm developing a site which serves some slow (up to around 4 sec. loading time) pages due to extensive database queries.</p>
  
  <p>In order to let the users know that the new page is loading (also to prevent multiple clicks), I'm displaying a div with a fake loading bar on the page where the users clicked a link to a slow loading page.</p>
  
  <p>Actually, showing the fake loading div is working very good. The DOM of the old page (with the fake loading bar) is still displayed when the new page is loading, which means the loading div is shown until the new page is ready to be displayed.</p>
  
  <p>This is how it's done. HTML part:</p>
  
  <pre><code>&lt;!-- link example which will execute the javascript --&gt;
  &lt;a href="link/to/slow/page/" class="loading"&gt;slow page&lt;/a&gt;
  
  &lt;!-- full screen div which gets displayed when clicking a
       "loading" class link. --&gt;
  &lt;div id="dim" style="display:none; top:0; left:0; width:100%; height:100%; z-index:9999;"&gt;
      &lt;div id="loading"&gt;
          &lt;p&gt;loading data, please wait...&lt;/p&gt;
          &lt;img src="loading.gif" alt="loading..." /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Javascript (jQuery) part:</p>
  
  <pre><code>$(".loading").each(function() {
      $(this).click(function() {
          $("#dim").fadeIn();
      });
      return true;
  });
  </code></pre>
  
  <p>The <strong>Problem</strong> now is, that if a user clicks back in the browser (just tested with FF 3.6) from a slow page, the loading bar div is still shown sometimes.</p>
  
  <p><strong>Questions:</strong></p>
  
  <ol>
  <li>Is this even a good way to design such a fake loading bar?</li>
  <li>If yes, is there a way to prevent the browsers from displaying the div when going back in the browser's history?</li>
  </ol>
  
  <p>Thanks for any hints.</p>
  
  <p><strong>Conclusion:</strong></p>
  
  <p>looks like there's no easy way to fake it that way. I'm going for Ajax data retrieval with a <em>real</em> loading bar.</p>