delaying the loading of a certain css background image

Question

in a CSS like this :

...
#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;
}
...

is there a way to delay the loading of #big-menu's background image, so that it loads after everything else, including all of the images in the HTML, and every other CSS background (the some-menu and some-other-menu).

The reason is, big-menu.jpg is very heavy in size, and I want it to be loaded last. After all, it just serves as an eye-candy, and there are other background images that have a better use than that. (such as the ones used in buttons)

Does the order of putting it in CSS or the occurrences of the markup (#big-menu) in HTML got anything to do with what gets loaded first ? or is there a more reliable way to control it ? javascript (jQuery preferred) is fine.

Answer 1

Ordering in css doesn't control which resources is loaded first. But do effect what existing style is being overwritten or inherited.

Try the javascript onload event. The event executes only after the page is finish loading.

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

Answer 2

Controlling when an image loads in CSS is not really possible. You could try putting it at the very bottom of your StyleSheet but I doubt you'll see an improvement.

Answer 3

I don't think placement in the styelsheet will affect it, as the order of the elements to which they are applied will decide which image will be loaded first.

You could use jQuery to load the images in the right sequence, though

$('firstElement').addClass('some-menu');
$('secondElement').addClass('some-other-menu');
$('lastElement').addClass('big-menu');

EDIT: Okay, so then maybe instead of adding a class, a better solution would be to add the background-images in runtime.

$('firstElement').css("background-image", "some-menu.jpg");
$('secondElement').css("background-image", "some-other-menu.jpg");
$('lastElement').css("background-image", "big-menu.jpg");

Answer 4

This might not be a perfect solution(as it is a css-background and not a image), but YUI Image loader provides a good way of lazy-loading images.

Create a group

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

After the document has loaded, the image will load 2 seconds after it. See Yahoo! Shine or the examples for demo.

Answer 5

Another solution is to split your assets over different domains, browsers will only request two assets at time then wait for one to be loaded before starting the next. You can observe this with Firebug and YSlow, so placing some assets on images.example.com and images1.example.com and see if that makes an impact

Answer 6

The order of downloading can't be controlled by using css. However you can use javascript to achieve this.

Although not directly related to the question maybe before doing that you should optmize the image by using smush.it or your favorite image program I find that jpegs look very good when saved at 85% quality. Experiment and don't forget to set your web server to cache images for long periods and then the problem will just be the first time your users go to the site.