title: Display loading icon once while waiting for AJAX call
body: <p>I'm populating a table with data that automatically updates every 4 seconds using AJAX. I want to display a loading message while waiting for the AJAX to load on the initial page load only. </p>
  
  <p>At the moment I have managed to display the loading message but the message appears every time the data is updated via AJAX (Every 4 seconds) - I want the loading message to only display on the initial page load before the AJAX loads initially. All subsequent AJAX updates should not display the loading message as the table has already been populated with data. </p>
  
  <p><code>&lt;div id="loading" style="display: none;"&gt;Loading..&lt;/div&gt;</code></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(document).ajaxStart(function(){
          $("#loading").show();
          }).ajaxStop(function() {
          $("#loading").hide();
      });
  &lt;/script&gt;
  </code></pre>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      var auto_refresh = setInterval(
      function () {
          $('#load_onlineusers').load('/online_players.php').fadeIn("slow");
      }, 4000); 
  &lt;/script&gt;
  </code></pre>
  
  <pre><code>&lt;div id="load_onlineusers"&gt; &lt;/div&gt;
  </code></pre>
  
  <p>Above is the code that is causing the loading message to display every 4 seconds.</p>