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

Answer 1

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

试试JavaScript onload事件.只有在页面加载完成后才会执行该事件.

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