Question

创建具有交叉渐变效果的简单照片库时，我遇到了奇怪的行为。

这是它应该如何工作：（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();
});

正如你所看到的，我试图以某种方式附加一个回调函数（在这种情况下与每个），但这并没有解决问题。

Answer 1

检查一下。我认为这对你有用：

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

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

仅在原始图像更新后删除叠印图像

1 个答案: