preload images before render javascript
<p>I wanna display images instantly as all the images are loaded for my smooth slider,
but its not working.</p>

<pre><code>var myPhotos = {
    _counter: 0,
    images: [],
    init: function() {
        ServerCall1(0, 'xml', 'rssphotos.php', function(xml) {
            imageObj = new Image();
            $(xml).find('item').each(function() {
                var desc = $(this).find('description').text();
                var resp = getImgArray(desc);

                myPhotos.images[myPhotos._counter] = resp[0];
                myPhotos._counter++;

            });

            //start preloading
            for (i = 0; i &lt; myPhotos._counter; i++) {
                imageObj.src = myPhotos.images[i];
            }

            ////PUT THE HEADER HOME PAGE
            topHeader.putData(topHeader.photoData());
        });
    }

};
</code></pre>

<p>After the execution of this function, I loop through <code>myPhotos.images</code> to get them instantly, but its rendering one by one very slowly.</p>
