Geek Answers Handbook

Delay loading specific css image

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

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

The reason is that 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 use better than that. (e.g. used in buttons)

Is the order of placement in CSS or the appearance of markup ( #big-menu) in HTML described , something related to what is loaded first? or is there a more reliable way to control it? javascript (preferably jQuery) is fine.

+5
7

css , , , .

onload JavaScript. .

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

( css-, ), YUI .

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

2 . . Yahoo! Shine examples .

+4

, , , , . Firebug YSlow, .example.com images1.example.com , .

+4

, , , , , .

jQuery ,

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

EDIT: , , .

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

CSS . StyleSheet, , .

0

css. javascript.

, , , , smush.it . , jpeg 85%. - , , .

0

Jason Javascript . :

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

More articles:


All Articles