Using jquery: Show an ajax-loading gif for each image being loaded until the that indivisual image is loaded fully
<p>Using jquery how to show a loading gif until a image is completely loaded and then remove the loading gif and show the actual image. This should happen independently on all images inside the page. Here is an example: </p>

<p><a href="http://jwt.com/" rel="nofollow">http://jwt.com/</a></p>

<p>Here is my attempt which does not seem to work:</p>

<p>HTML</p>

<pre><code>&lt;div class="thumbnail"&gt;&lt;a href="#" class="boxImage ajaxloader"&gt;&lt;img src="...image-one..." /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class="thumbnail"&gt;&lt;a href="#" class="boxImage ajaxloader"&gt;&lt;img src="...image-two..." /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class="thumbnail"&gt;&lt;a href="#" class="boxImage ajaxloader"&gt;&lt;img src="...image-three..." /&gt;&lt;/a&gt;&lt;/div&gt;
</code></pre>

<p>CSS</p>

<pre><code>.ajaxloader{ background: transparent url(..ajax-loader.gif...) no-repeat scroll center center;
</code></pre>

<p>JS</p>

<pre><code>    $('a.boxImage img').one("load", function(){
         $(this).parent().removeClass('ajax-loader');
     }).each(function(){
         //covering the case images loading from cache
         if(this.complete){
            $(this).trigger("load");
            $(this).parent().removeClass('ajax-loader');
         }
    });
</code></pre>

<p>Another question... does the above method (say, after fixing the issue) allow only one image to load at a time or does it allow the browser to make multiple requests for images and load as many as it can in parallel.</p>
