Question

When creating a simple photo gallery with a crossfade effect I’m encountering weird behavior.

This is how it’s supposed to work: (1.) I fade in an overlay image on top of the original image, (2.) I change the src attribute of the underlying original image to that of the overlay image and, as a last step, (3.) I remove the overlay image.

$("#photo").attr({
    src: imageURL,
    alt: altText
});
$("#overlay-photo").remove();

The above code (showing the last two steps) works when all images are cached. It briefly flashes the old, unchanged image before displaying the updated image when the cache is empty, presumably because the change of attributes and the removal of the src attribute happens at the same time and remove might be a tad quicker than changing the src attribute and updating the image.

$("#photo").attr({
    src: imageURL,
    alt: altText
}).each(function () {
    $("#overlay-photo").remove();
});

As you can see, I tried to somehow attach a callback function (in this case with each) but that didn’t solve the problem.

Answer 1

Ckeck this out. I think it will work for you:

   $('#overlay-photo').fadeIn(500,function() {

        $('#photo').hide().one('load',function() {
            $(this).fadeIn();
            $('#overlay-photo').remove();
        }).attr({
            src: imageURL,
            alt: altText
        });
    });