CODEWITHSUNDEEP
javascripthtmlcssloadingbackground-image
andyk
andyk

Reputation: 10008

delaying the loading of a certain css background image

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.

Upvotes: 5

Views: 13901

Answers (7)

Jason
Jason

Reputation: 848

The ordering in css doesn't control which resources are loaded first, but do affect 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="url(../images/big-menu.jpg)";
}
window.onload=loadBG();

Upvotes: 8

Adam Walter
Adam Walter

Reputation: 93

Jason's Javascript trick worked for me in solving this problem. However, I had to correct the syntax slightly:

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

Upvotes: 0

Mon Villalon
Mon Villalon

Reputation: 692

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.

Upvotes: 0

Tom
Tom

Reputation: 34356

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

Upvotes: 4

peirix
peirix

Reputation: 37741

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");

Upvotes: 2

Alagu
Alagu

Reputation: 2854

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.

Upvotes: 4

James
James

Reputation: 111890

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.

Upvotes: 0

Related Questions