Javascript 仅在原始图像更新后删除覆盖图像

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

这就是它的工作原理：（1）我淡入原始图像顶部的覆盖图像，（2）我将底层原始图像的src属性更改为覆盖图像的src属性，最后一步，（3）我删除覆盖图像

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

以上代码（显示最后两个步骤）在缓存所有图像时起作用。当缓存为空时，它会在显示更新的图像之前短暂闪烁旧的、未更改的图像，这可能是因为属性的更改和src属性的删除同时发生，并且删除可能比更改src属性和更新图像快一点

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

---

如您所见，我试图以某种方式附加一个回调函数（在本例中为每个回调函数），但这并没有解决问题。

。我认为它会对你有用：

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

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

---

@Michael Kaltenecker如果您有问题，请发表评论，我会尽力解决。您可能需要调整css属性。是的，我认为css属性现在是问题所在。我在叠加照片上使用了一个负边距，将其直接放在原始照片的上方。由于这张原始照片在一瞬间不再显示，整个页面在这一瞬间跳了起来。啊！我刚刚删除了

.hide（）

和

$（this.fadeIn（）

）。它似乎没有它的工作和闪烁消失了。由于原始照片不再隐藏，因此底片边距也不是问题。是否有必要隐藏原始照片，或者我可以将其忽略掉？@Michael Kaltenecker，如果您的

#叠加照片

覆盖了原始图像。然后

.hide（）

和

$（this）.fadeIn（）

不是必需的。