title: How to show loading gif image while content called via javascript is loading?
body: <p>On my page I have javascript that loads new content in <code>&lt;div id="content"&gt;&lt;/div&gt;</code> from other page located at: <code>inc/content.php</code>. I would like to know how can I show animated gif image <code>loading.gif</code> in <code>&lt;div id="content"&gt;&lt;/div&gt;</code> while new content gets loaded into it? and once loaded hide gif and show new conntent?</p>
  
  <p>Thank You )))
  Here is my code:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  
  &lt;script type="text/javascript" src="js/jquery-1.6.4.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  function viewNext()
  {
  $("#content").load("inc/content.php");
  }
  &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;button id="nextfLuky" onClick="viewNext();return false;"&gt;Next fLuky&lt;/button&gt;
  
  &lt;div id="content"&gt;&lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>content in inc/content.php page:</strong></p>
  
  <pre><code>&lt;div id="text"&gt;Hello&lt;/div&gt;
  </code></pre>