javascript - 延迟加载背景图像闪烁

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)";

现在，显示背景图像所需的 css 已使用 javascript 添加到我的主样式表中。有效，在加载其他所有内容后大背景加载。

但是:当我在页面之间导航时，背景图像会闪烁。每次都会加载。我究竟做错了什么？ 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 规则没有闪烁。很简单。