javascript - 仅在原始图像更新后删除叠加图像

Question

创建具有淡入淡出效果的简单照片库时，我遇到了奇怪的行为。

这就是它应该如何工作的：（1.）我在原始图像之上淡入叠加图像，（2.）我将底层原始图像的 src 属性更改为叠加图像的属性，最后步骤，（3.）我删除了覆盖图像。

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

上面的代码（显示最后两个步骤）在缓存所有图像时有效。当缓存为空时，它会在显示更新的图像之前短暂地闪烁旧的、未更改的图像，大概是因为属性的更改和 src 属性的删除同时发生，并且 remove 可能比更改 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
        });
    });