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

Preload image for seamless background image change in JavaScript

本文关键字：图像 背景 加载 JavaScript      更新时间：2023-09-26

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

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

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

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

NewImage.onload = ImageLoadComplete();

您正在传递调用ImageLoadComplete()的结果，这意味着您立即调用回调。不要调用函数，您的代码应该按预期工作（大多数情况下）：

NewImage.onload = ImageLoadComplete;

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

if (NewImage.complete || NewImage.height > 0) {
    ImageLoadComplete();
} else {
    NewImage.onload = ImageLoadComplete;
}
相关文章：