<ul id="image_ul">
<li class="loading"></li>
<li class="loading"></li>
</ul>

add some style in style section-

<style type="text/css">
#image_ul { margin:0; padding:0; }
#image_ul li { float:left; margin:0; width:250px; height:250px; list-style:none; }
#image_ul li.loading { background: url(/images/loader.gif) no-repeat center center; }
</style>

in the header section -

<script type="text/javascript">
$(function () {
//image sources
var images = new Array();
images[0] = 'http://feedjit.com/images/bflags/bd.gif';
images[1] = 'http://live.feedjit.com/images/logos/feedjit32Dark.png';

// loop through matching element
$("ul#image_ul li").each(function (index, el) {
// new image object
var _img = new Image();
// image onload
$(_img).load(function () {
// hide first
$(this).css('display', 'none');// for safari
//
$(el).removeClass('loading').append(this);
$(this).fadeIn();
}).error(function () {
$(el).remove();
}).attr('src', images[index]);
});

});

</script>

if you like it, don't forget to share and like