Javascript to load image from server asynchronously.

Question

Hi,

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.

Answer 1

http://www.mail-archive.com/[email protected]/msg00377.html