延迟加载某个CSS背景图片

Question

在这样的 CSS 中：

...
#big-menu {
    background: #fff url(../images/big-menu.jpg) no-repeat;
}
#some-menu {
    background: #fff url(../images/some-menu.jpg) no-repeat;
}
#some-other-menu {
    background: #fff url(../images/some-other-menu.jpg) no-repeat;
}
...

有没有办法延迟 #big-menu 的背景图像的加载，以便它在其他所有内容之后加载，包括 HTML 中的所有图像，以及每个其他 CSS 背景（some-menu 和 some-other-menu）。

原因是，big-menu.jpg 非常大，我希望它最后加载。 毕竟，它只是起到养眼的作用，还有其他背景图像比它有更好的用途。 （例如按钮中使用的）

将其放入 CSS 的顺序或 HTML 中标记 (#big-menu) 的出现是否与首先加载的内容有关？ 或者有更可靠的方法来控制它？ javascript（首选 jQuery）就可以了。

Answer 1

css 中的顺序不控制首先加载哪些资源，但会影响覆盖或继承哪些现有样式。

尝试 JavaScript onload 事件。 该事件仅在页面完成加载后执行。

function loadBG(){
    document.getElementById("big-menu").style.backgroundImage="url(../images/big-menu.jpg)";
}
window.onload=loadBG();

Answer 2

这可能不是一个完美的解决方案（因为它是 css 背景而不是图像），但是 YUI图像加载器提供了一种延迟加载图像的好方法。

创建组

var imgGroup = new YAHOO.util.ImageLoader.group(window, 'load', 2);

文档加载后，图像将在其后 2 秒加载。 请参阅雅虎！ Shine 或演示的示例。

Answer 3

另一种解决方案是将您的资产分割到不同的域中，浏览器一次只会请求两个资产，然后等待一个资产加载，然后再开始下一个。 您可以使用 Firebug 和 YSlow，因此将一些资源放在 images.example.com 和 images1.example.com 上，看看是否会产生影响

Answer 4

我认为样式表中的放置不会影响它，因为应用它们的元素的顺序将决定首先加载哪个图像。

您可以使用 jQuery 以正确的顺序加载图像，但

$('firstElement').addClass('some-menu');
$('secondElement').addClass('some-other-menu');
$('lastElement').addClass('big-menu');

编辑：
好的，那么也许更好的解决方案是在运行时添加背景图像，而不是添加类。

$('firstElement').css("background-image", "some-menu.jpg");
$('secondElement').css("background-image", "some-other-menu.jpg");
$('lastElement').css("background-image", "big-menu.jpg");

Answer 5

在 CSS 中控制图像加载时间实际上是不可能的。 您可以尝试将其放在样式表的最底部，但我怀疑您会看到改进。

Answer 6

使用css无法控制下载的顺序。 不过你可以使用 javascript 来实现这一点。

虽然与问题没有直接关系，但也许在这样做之前，您应该使用 smush.it 或您最喜欢的图像程序来优化图像，但我发现以 85% 质量保存时，jpeg 看起来非常好。 进行实验，不要忘记将您的网络服务器设置为长时间缓存图像，然后问题将只是您的用户第一次访问该网站。

Answer 7

Jason 的 Javascript 技巧帮助我解决了这个问题。 但是，我必须稍微纠正一下语法：

function loadBG(){
     document.getElementById("big-menu").style.backgroundImage="url(../images/big-menu.jpg)";
}
window.onload=loadBG();