5

在这样的 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 中的顺序或#big-menuHTML 中标记 () 的出现是否与首先加载的内容有关？还是有更可靠的方法来控制它？javascript（首选jQuery）很好。

4

7 回答 7

8

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

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

function loadBG(){
    document.getElementById("big-menu").style.backgroundImage="url(../images/big-menu.jpg)";
}
window.onload=loadBG();
于 2009-02-03T06:33:21.393 回答
4

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

创建群组

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

文档加载后，图像将在 2 秒后加载。见雅虎！Shine或演示示例。

于 2009-02-03T14:34:05.370 回答
4

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

于 2009-02-05T08:06:59.503 回答
2

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

不过，您可以使用 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");
于 2009-02-03T14:15:55.063 回答
0

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

于 2009-02-03T12:10:12.493 回答
0

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

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

于 2009-06-02T00:51:16.157 回答
0

Jason 的 Javascript 技巧为我解决了这个问题。但是，我不得不稍微更正语法：

function loadBG(){
     document.getElementById("big-menu").style.backgroundImage="url(../images/big-menu.jpg)";
}
window.onload=loadBG();
于 2012-01-09T14:39:57.017 回答