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背景（{{1} }和some-menu）。

原因是，big-menu.jpg的大小非常重，我希望它最后加载。毕竟，它只是一个令人瞩目的焦点，还有其他背景图像比这更好用。（例如按钮中使用的那些）

将它放入CSS中的顺序或HTML中标记（some-other-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-background而不是图像），但是YUI Image loader提供了一种延迟加载图像的好方法。

创建一个组

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

文档加载后，图像将在2秒后加载。有关演示，请参阅Yahoo! Shine或examples。

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中加载图像。您可以尝试将它放在StyleSheet的最底部，但我怀疑您会看到改进。

Answer 6

使用css无法控制下载顺序。但是，您可以使用javascript来实现此目的。

虽然与此问题没有直接关系，但在此之前你应该通过使用smush.it或你最喜欢的图像程序来优化图像，我发现当以85％的质量保存时，jpegs看起来非常好。尝试并且不要忘记将您的Web服务器设置为长时间缓存图像，然后问题将是您的用户第一次访问该站点。

Answer 7

Jason的Javascript技巧在解决这个问题上对我有用。但是，我必须稍微纠正语法：

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

延迟某个css背景图像的加载

7 个答案: