Home/ Questions/Q 120949
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T03:53:33+00:00

in a CSS like this : … #big-menu { background: #fff url(../images/big-menu.jpg) no-repeat; }

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. 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();
    • 0