Fade in / switch image / fade out functionality not firing at correct time

[tk403]

Hello all, I have a script that runs a slideshow of images by fading out the current image, changing the image attributes (src and alt), then fading back in. It works fine on localhost, but when I put it up on the production environment sometimes the old image will fade in, then quickly switch to the new one after fade in has completed. Any suggestions?



$(document).ready(function() {



var images = [
'slide-01.jpg',
'slide-02.jpg',
'slide-03.jpg',
'slide-04.jpg',
'slide-05.jpg',
'slide-06.jpg',
'slide-07.jpg',
'slide-08.jpg',
'slide-09.jpg',
'slide-10.jpg',
'slide-11.jpg',
'slide-12.jpg',
'slide-13.jpg',
'slide-14.jpg',
'slide-15.jpg',
'slide-16.jpg'
];

var imageNames = [
'Image 1',
'Image 2',
'Image 3',
'Image 4',
'Image 5',
'Image 6',
'Image 7',
'Image 8',
'Image 9',
'Image 10',
'Image 11',
'Image 12',
'Image 13',
'Image 14',
'Image 15',
'Image 16'
];



function switchAndAppear(elem, i) {

i == images.length - 1 ? i = 0 : i++;

$(elem)
.attr({
"src": 'images/slideshow/' + images[i],
"alt": imageNames[i]
})
.fadeIn(1000, function() {
disappear(this, i);
});

}



function disappear(elem, i) {

setTimeout(
function() {
$(elem).fadeOut(1000, function() {
switchAndAppear(this, i);
});
}, 7000);

}



// set random initial slideshow image
var p = Math.floor(Math.random() * (images.length + 1));

$("#gallery-image")
.attr({
"src" : 'images/slideshow/' + images[p],
"alt" : imageNames[p]
});



// start slideshow
$("#gallery-image").delay(4000).fadeOut(1000, function() {
switchAndAppear(this, 0);
});



});

[MJH]

See:

http://www.dynamicdrive.com/forums/showpost.php?p=224998&postcount=2

[vwphillips]

your images will take time to load, the images may need to be preloaded

[tk403]

Thanks that's definitely the problem, just need to preload the images. Much obliged!