preload images before render javascript

I wanna display images instantly as all the images are loaded for my smooth slider, but its not working.

var myPhotos = {
    _counter: 0,
    images: [],
    init: function() {
        ServerCall1(0, 'xml', 'rssphotos.php', function(xml) {
开发者_如何学Python            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 < myPhotos._counter; i++) {
                imageObj.src = myPhotos.images[i];
            }

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

};

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

---

Perhaps this

var myPhotos = {
    _counter: 0,
    images: [],
    init: function() {
        ServerCall1(0, 'xml', 'rssphotos.php', function(xml) {
            $(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 < myPhotos._counter; i++) {
                this.images[i]= new Image(); this.images[i].src = myPhotos.images[i];
            }

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

};