Javascript to load image from server asynchronously

I want to load images from my server to an image gallery. The problem is that after loading the web page my program loads all the images first and then displays them all at the same time. As a result, there is a significant wait for them to load.

I would like to display the images one at a time as they load开发者_运维百科, showing an "busy" indicator on the images that haven't loaded yet.

Here is my code:

controller.labelForIndex = function (index) { 
    var arrayIndexNO=(index%(temp.length/2))*2;
    var appID=temp[arrayIndexNO];
    var iconImage=appID+".png";

    $(".ad-carousel-view .cells > li").css("background-image", "url("+iconImage+")");

    return temp[arrayIndexNO+1];
};

This function is called 10 times to load 10 pngs and display them in a cell, but my code loads all images first and then displays them all at the same time.

---

How to load images with jquery ajax? (From jQuery mailing list) :

You can not load images with AJAX simply create a new image object and append, then the image can load asyncronously. Try this simple jQuery plugin:

$.fn.image = function(src, f){
    return this.each(function(){ 
        var i = new Image();
        i.src = "">        i.>        this.appendChild(i);
    });
}

Then call this plugin like:

$("#container").image(" http://jquery.com/images/hat2.gif",function(){
  alert("The image is loaded now");
});