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

Question

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

我目前遇到的问题是，当背景从旧图像变为新图像时，有一个瞬间 'flash'，这表明有一段时间 (尽管非常简短）正在加载新图像的位置。

我已经尝试过各种预加载方法，但我对 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;
}

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

Preload image for seamless background image change in JavaScript

javascript

image

preload