ajax img change

i开发者_StackOverflow have implemented a code that fetch single image from 1000+ images. The image has been changed using ajax call and downloading time of each image varies. How to make this image change with smooth transition from one another i.e without any flicker and ajax processing image

You could pre-select the images you are about to load and store it in a persistent array:

var image_paths = new Array();
/* fill image_paths */

window.preload_images = new Array();

for (var i in image_paths) {
    var image_src = image_paths[i];
    var img = new Image();
    img.src = image_src;
    preload_images.push(img);
}

This will tell the DOM to load the image into a JavaScript Image object but to not destroy it unless preload_images is unset.