Downloading photos on the client side every 10 sec

Question

There is a web site page which is coded on asp.net with using c# and ajax is enabled too.

I want a very fast loading web page; which is going to happen with the following architecture;

1- First all data is shown by the text boxes (There are 50 text boxes, it is an application form.)

2- When the web Page is requested and loaded, then I want all the photos are shown near the each text boxes 10 by 10 from top of the page till the end of it. (Each photo is between 5 kb - 20 kb; )

I know ImageHandler's the question is how can I put all these idea into real life? some examples and ideas will be great ! thanks

bk

Answer 1

(function(images, elements) {
    var fetchImages = function() {
        if(images.length > 0) {
            var numImages = 10;
            while(images.length > 0 && numImages-- > 0) {
                // assuming your elements are <img>
                document.getElementById(elements.shift()).src = images.shift();
                // if not you could also set the background (or backgroundImage) css property
                // document.getElementById(elements.shift()).style.background = "url(" + images.shift() + ")";
            }
            setTimeout(fetchImages, 5000);
        }
    }

    // bind to window onload
    window.onload = fetchImages;
    // if you're going to use something like jquery then do something like this instead
    //$(fetchImages);
}(['url1', 'url2', 'url3'], ['img1', 'img2', 'img3']))

Something like that would do what, I think, you're asking.
The last line would probably be replaced with something like

}(<%=ImageUrls %>, <%=ImageElements %>))