title: Javascript / Jquery: Show and hide a Loading Screen message
body: <p>I want the following behavior to happen.  </p>
  
  <p>1) User clicks on a link on my site</p>
  
  <p>2) I show text which says the next page is loading</p>
  
  <p>3) Then the user goes to the next page.</p>
  
  <p>4) If the user clicks Back to go to the original page, the text which says loading is no longer there.</p>
  
  <p>I don't know how to implement #4.  I've tried window.onbeforeunload but couldn't get it to work properly.</p>
  
  <pre><code>    &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
      &lt;html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"&gt;
      &lt;head&gt;
      &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"&gt;
          &lt;title&gt;My website&lt;/title&gt;
          &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
      &lt;div id="loadingDiv" style="display:none;"&gt;
          This should show when I click on link. This should not show when users leaves this page and then clicks back.  
      &lt;/div&gt; 
  
      &lt;script&gt;
      $(function() {
          $('.button').click(function() {
              $('#loadingDiv').show();
          });        
      });
      &lt;/script&gt;
  
      &lt;br&gt;&lt;br&gt;
      &lt;a class="button" href="http://www.google.com"&gt;Open google&lt;/a&gt;
  
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>