title: Show loading indicator with jQuery
body: <p>I have a <code>&lt;div&gt;</code> with an image slider in an <code>&lt;li&gt;</code>. There are 12 images, and it takes some time to load all of them. While the images load, I want to show a loading GIF image. How can I do this with jQuery? My code is:</p>
  
  <pre><code>&lt;div id="banner_slider"&gt;
  &lt;ul id="portfolio"&gt;                 
  
          &lt;li&gt;
              &lt;a href="#"&gt;&lt;img src="gallery/2010/2010slider//01_quddus_helal.jpg" alt="Slider Image" border="0" /&gt;&lt;/a&gt;&lt;br /&gt;
              &lt;p class="caption"&gt; Quddus Helal :: 01st - 2010&lt;/p&gt;
          &lt;/li&gt;               
  
  
          &lt;li&gt;
              &lt;a href="#"&gt;&lt;img src="gallery/2010/2010slider//02_md_moniruzzaman.jpg" alt="Slider Image" border="0" /&gt;&lt;/a&gt;&lt;br /&gt;
              &lt;p class="caption"&gt; Md Moniruzzaman :: 02nd - 2010&lt;/p&gt;
  
          &lt;/li&gt;               
  
     &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>