延迟加载特定的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）即可。

- andyk

---

嗨，Andy！ - alex

Answer 1

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

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

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

- jason

---

当调用此函数时，所有图像和其他背景图像是否都已加载完成？据我所知，onload事件是在HTML加载完成而不是图像加载完成时触发的。 - andyk

当页面上的所有资源，包括图像、iframe、CSS文件和JavaScript文件都加载完成时，将触发onload事件。 - Pim Jager

这不应该是 window.onload=loadBG;（没有括号）吗？我的 IDE 抱怨有括号。 - jarhill0

Answer 2

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

创建一个组。

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

文档加载后，图片将在2秒后加载。请参见Yahoo! Shine或示例进行演示。

- Alagu

---

此外，查看此链接以获取jQuery等效版本: http://www.appelsiini.net/projects/lazyload - Jeremy Ricketts

Answer 3

另一个解决方案是将您的资产分布在不同的域上，浏览器一次只会请求两个资产，然后等待一个被加载完成才开始下一个。您可以使用Firebug和YSlow进行观察，因此将一些资产放置在images.example.com和images1.example.com上，看看是否会产生影响。

- Tom

---

好的回答。我考虑过这个，但它似乎相当繁琐，并且现在不太可行，因为我只需要延迟那张图片，而且我没有子域名的访问权限。尽管如此，还是给你点赞 :) - andyk

值得注意的是，2013年大多数现代浏览器可以同时加载更多的资源。 - Ally

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

- peirix

---

即使在实际布局中没有使用，样式表中引用的图像也会通过网络传输。添加类只会延迟它们显示的时间。 - Jeremy Ricketts

Answer 5

CSS 中控制图像加载时间并不是很可行。你可以尝试将其放在样式表的最底部，但我认为你不会看到任何改善。

- JimmyP

Answer 6

使用CSS无法控制下载顺序。但是，您可以使用JavaScript来实现。

虽然与问题不直接相关，但在此之前，您应该通过使用smush.it或您喜欢的图像程序来优化图像。我发现将JPEG保存为85％质量时效果非常好。进行试验，并不要忘记将Web服务器设置为长时间缓存图像，这样问题就只会出现在用户首次访问网站时。

- Mon Villalon

Answer 7

Jason的JavaScript技巧对我解决了这个问题。不过，我稍微纠正了一下语法：

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

- Adam Walter