Loading in background..

[Stewartiee]

Is there anyway possible to do this? I would like to hide several <div> tags when the page loads, but put it on a timer so after the page is finished loading the fade in. In the meantime whilst the page is loading, a image is shown.

It's for a radio player i'm working on, the page takes around 5seconds to load fully, and so thought a loading image would be better to look at than half loaded <div> tags.

[venegal]

That's actually quite easy to accomplish. Just style those divs with display:none, and in the window.onload handler set the style.display property back to "block" in order to show them, or just use whatever fading function you got there.

As for the image showing in the meantime, just put it there; no Javascript necessary. Just make sure you hide it as soon as the page is loaded (set style.display to "none" in the window.onload).

Be advised tough that this will cause serious accessibility issues, as the hidden divs will never show up if the user agent doesn't allow Javascript. In order to solve that problem, you would have to hide the divs programatically, and not with CSS, and it's hard to get the right time to that (when the element already exists, but before it starts showing, so it won't flash). If you don't mind ugly and unmaintainable, you could put the script hiding the div just after the div definition into your HTML.