延迟加载某个CSS背景图片

StackOverflow https://stackoverflow.com/questions/506126

题

在这样的 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-menu）在 HTML 中与首先加载的内容有什么关系？或者有更可靠的方法来控制它？javascript（首选 jQuery）就可以了。

有帮助吗？

解决方案

在CSS不控制这些资源的首次加载时间，但不要影响什么现有的样式被覆盖或继承的顺序。

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

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

其他提示

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

创建一个群组

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

文档加载后，图像将在 2 秒后加载。看 雅虎！闪耀 或者 例子 用于演示。

另一种解决方案是在不同的域分裂资产，浏览器将仅在每次请求2个资产然后等待一个开始下一个之前被加载。你可以观察这个与萤火虫和的 YSlow的，这样，将部分资产上images.example.com和images1.example.com和看看是否是冲击

我不认为放置在styelsheet会影响它，因为它们会施加决定哪些图像将被首先加载的元素的顺序。

您可以使用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图象负载是不是真的可能的。你可以尝试把它在你的样式表的最底部，但我怀疑你会看到一个进步。

下载的顺序不能使用CSS来控制。然而，你可以使用JavaScript来实现这一目标。

虽然也许这样做，你应该使用smush.it或您最喜爱的图像程序租期，提高图像之前没有直接关系的问题，我觉得，当在85％质量JPEG文件保存看起来非常好。实验也不要忘记设置您的Web服务器缓存图片长时间，然后问题将只是第一次您的用户访问该网站。

杰森的JavaScript伎俩解决这一问题为我工作。然而，我不得不略微修正的语法：

function loadBG(){
     document.getElementById("big-menu").style.backgroundImage="url(../images/big-menu.jpg)";
}
window.onload=loadBG();
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top