预加载图像以在JavaScript中无缝更改背景图像

Question

我有一个Python Websocket应用程序，该应用程序将图像路径发送到JavaScript HTML文件。 收到图像路径后，我将网页的背景图像更改为提供的图像。

我目前遇到的问题是，当背景从旧图像变为新图像时，会出现短暂的“闪光”，这表明在一段时间内（尽管很短暂）正在加载图像。

我尝试了各种预加载方法，但是我对JavaScript还是很陌生，因此不确定哪种方法可以在两个图像之间实现无缝过渡。 这是我目前已实现的方法：

var NewImage = new Image();
NewImage = message.data; //This is the image string received from Python
document.body.style.backgroundImage = "url('" + NewImage + "')";

上面显示了所需的图像（包括我的CSS格式），但是过渡并不美观。

我还尝试了以下方法，这对我来说更有意义，但我无法使其正常工作。

var NewImage = new Image();

//Websocket function here
PreloadImage;

function PreloadImage() {

    NewImage.onload = ImageLoadComplete();
    NewImage.src = message.data;

}

function ImageLoadComplete() {

    document.body.style.backgroundImage = "url('" + NewImage + "')"

}

我不确定在第二种方法中如何在函数之间传递变量。 鉴于此方法中明确的“ onload”调用，我认为这可以提供我所追求的功能。

如何预加载图像以在它们之间无缝过渡？

编辑：工作代码发布在下面。 感谢@blender为我指出正确的方向:)

var NewImage = new Image;

NewImage.src = message.data; //Data from Python
if (NewImage.complete) {
    NewImage.onload = ImageLoadComplete();
} else {
    NewImage.onload = ImageLoadComplete;
}

function ImageLoadComplete() {
    document.body.style.backgroundImage = "url('" + NewImage.src + "')";
}

Answer 1

您实际上并没有传递回调函数：

NewImage.onload = ImageLoadComplete();

您正在传递调用ImageLoadComplete()的结果 ，这意味着您立即调用了回调。 不要调用该函数，您的代码应该可以正常工作（大部分时间）：

NewImage.onload = ImageLoadComplete;

您将遇到的一个问题是，如果从缓存加载图像，某些浏览器可能不会调用onload 。 在这种情况下，您必须手动调用回调：

if (NewImage.complete || NewImage.height > 0) {
    ImageLoadComplete();
} else {
    NewImage.onload = ImageLoadComplete;
}