延迟加载的背景图像闪烁

Question

我将我网站的所有javascript保存在一个很大的文件中-- my_scripts.js。在所有页面上，我都推迟了这个文件的加载(使用内联javascript)。这是加载的最后一件事。

因为我的HTML正文使用了一个大的背景图像，所以我认为推迟加载这个图像也是一个好主意。我从body css类中删除了这一部分：background-image: url('my_background.jpg');

然后，作为我的my_scripts.js的第一行，我添加了以下内容：document.body.style.backgroundImage = "url(my_background.jpg)";

现在，用javascript将显示背景图像所需的css添加到我的主样式表中。工作时，在加载完所有其他内容之后，会加载大的后台。

但是:当我在页面之间导航时，背景图像闪烁。它每次都会加载。我做错了什么？my_scripts.js应该在浏览器的缓存中！为什么会闪烁？

编辑:如果我用预加载图像，仍会闪烁

if (document.images) {
img1 = new Image();
img1.src = "my_background.jpg";
}

Answer 1

使用background-image:url('my_background.jpg)";而不是document.body.style.backgroundImage = "url(my_background.jpg)";，因为简单地说，您的CSS规则没有闪烁。很简单。