Remove an overlay image only after the original image has updated

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 attribu开发者_StackOverflow社区te 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.

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
        });
    });