Help with fading in thumbnails when they've loaded?

Help with fading in thumbnails when they've loaded?

Hi all

I've created a page of thumbnails that shows a loading icon for each thumbnail, then fades the thumbnails in once they've loaded and removes the loading icons.

It all works fine, but I'm wondering if there's a way to improve it. At the moment all the images fade in at the same time once they've all loaded, but I'd like each one to fade in separately as and when it's loaded.

I've not used jQuery much, but was able to hash together what I have so far. However, I'm not sure where to go from here. Can anyone help?

Javascript:

$(document).ready(function() {
   $(".thumbimg").hide();
});
$(window).load(function () {
   $(".thumbimg").fadeIn(400);
   $('.thumbnail').removeClass('thumbloader');
});


CSS:

div.thumbnail {
   height: 185px;
   width: 160px;
   overflow: hidden;
}
div.thumbloader {
   background: url(/img/misc/loader.gif) no-repeat scroll center center;
}
div.thumbnail img {
   height: 160px;
   width: 160px;
}


HTML:

<div class="thumbnail thumbloader"><img src="/myimage1.jpg" class="thumbimg" /></div>
<div class="thumbnail thumbloader"><img src="/myimage2.jpg" class="thumbimg" /></div>
<div class="thumbnail thumbloader"><img src="/myimage3.jpg" class="thumbimg" /></div>
... and so on