Удалить оверлейное изображение только после обновления исходного изображения

Question

При создании простой фотогалереи с эффектом перекрестного затухания я сталкиваюсь со странным поведением.

Вот как это должно работать: (1.) Я наложил изображение наложения поверх исходного изображения, (2.) Я изменил атрибут src базового исходного изображения на атрибут наложения изображения и, как последний шаг, (3.) Я удаляю наложение изображения.

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

Приведенный выше код (показывает последние два шага) работает, когда все изображения кэшируются. Он кратко мигает старое, неизмененное изображение перед отображением обновленного изображения, когда кэш-память пуста, предположительно потому, что изменение атрибутов и удаление атрибута src происходит одновременно, и удаление может быть немного быстрее, чем изменение атрибута src и Обновление изображения.

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

Как вы можете видеть, я пытался каким-то образом прикрепить функцию обратного вызова (в данном случае с каждой), но это не решило проблему.

Answer 1

Выключи это. Я думаю, что это будет работать для вас

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

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