Question

I’ve made a simple image switcher that fades different logos in and out. Example and full source code at http://bit.ly/ewrSgp . I fadeout the image, then queue a src attribute change, then fade back in. It seems to work smoothly for a while but after 20 seconds or so it starts to fade the image back in before changing the src, which then changes instantly and looks ugly. Am I doing this right?

The code that runs the change is:

// fadeout old image, change to new and fadeback in.
// Call function changeimage again.
$(imToChange).fadeOut(600).queue(function (n) {
    jQuery(this).attr('src', newimageSrc);
    n();
}).fadeIn(1000, function () {
    setTimeout(function () {
        //recall image change function
        changeImage(indexToChange);
    }, o.delay);
});

Thanks in advance.

Answer 1

I saw some flickers, but not many. I noticed that it happened on a particular logo, I think the first time I saw it, but not the next time, which makes me think that once it’s loaded, it’s fine. Some thoughts:

• Does this happen if the images are all local (and hence load very quickly)?
• Have you tried preloading the images?
• If preloading works, what do you think about putting them all in a sprite? Only one http request to make.