Javascript 延迟加载特定css背景图像

在这样的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;
}
...

有没有办法延迟加载

#大菜单

的背景图像，以便它在加载其他所有内容之后加载，包括HTML中的所有图像和其他CSS背景（一些菜单和一些其他菜单）

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

---

将其放入CSS的顺序或HTML中出现的标记（

#大菜单

）是否与首先加载的内容有关？还是有更可靠的方法来控制它？javascript（首选jQuery）很好。

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

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

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

---

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

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

不过，您可以使用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");

---

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

创建一个组

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

---

加载文档后，图像将在加载2秒后加载。请参阅或以获取演示。

另一种解决方案是在不同的域上拆分资产，浏览器一次只请求两个资产，然后等待加载一个资产，然后再开始下一个。您可以通过和来观察这一点，因此将一些资源放在images.example.com和images1.example.com上，看看这是否会产生影响

使用css无法控制下载顺序。但是，您可以使用javascript来实现这一点

---

虽然与这个问题没有直接关系，但在这样做之前，你应该使用smush.it或你最喜欢的图像程序来优化图像。我发现JPEG在85%的质量下保存时看起来非常好。尝试一下，别忘了将您的web服务器设置为长时间缓存图像，那么问题只会出现在您的用户第一次访问该站点时

Jason的Javascript技巧对我解决这个问题起了作用。但是，我必须稍微更正语法：

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

---

调用此函数时，是否所有图像和所有其他背景图像都已加载完毕？当HTML（而不是图像）完成加载时，会触发onload事件AFAIK。当页面上的所有资源（包括图像、iFrame、css文件和javascript文件）完成加载时，会触发onload事件。这不应该是

window.onload=loadBG（无括号）？我的IDE对括号表示不满。样式表中引用的图像即使没有在实际布局中使用，也会出现问题。添加一个类只会在显示它们时延迟。另请参阅此链接以获取jQuery等价物：好答案。我已经考虑过了，但它看起来相当麻烦，而且目前还不完全可行，因为我只需要延迟一个映像，而且我没有访问子域的权限。然而，+1:）值得注意的是，2013年，大多数现代浏览器同时加载更多的资产。嗨，安迪！