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

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

0 голосов
/ 08 мая 2011

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

Вот как это должно работать: (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();
});

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

1 Ответ

0 голосов
/ 08 мая 2011

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

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

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