延迟加载背景图像闪烁

时间:2014-10-08 09:53:27

标签: javascript html css

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

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

然后,作为my_scripts.js的第一行,我添加了这个:document.body.style.backgroundImage = "url(my_background.jpg)";

现在,需要显示背景图像的CSS已添加到我的主样式表中,使用javascript。 Works,大量后台在其他所有内容加载后加载。

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

编辑:如果我用

预加载图像,仍然会闪烁
if (document.images) {
img1 = new Image();
img1.src = "my_background.jpg";
}

1 个答案:

答案 0 :(得分:0)

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