As mentioned above, you can initially style everything to be visibility:hidden
<div id="content" style="visibility:hidden">
<!-- all your content
(won't be displayed, as long as they are not explicitly
visibility:visible) -->
</div>
The javascript to un-hide everything is quite simple:
function unhide() { document.getElementById("content").style.visibility = ""; }
To call it when everything is loaded, use the load
event:
document.addEventListener('load', unhide, false);
I think the jQuery ready()
handler actually listens to the DOMContentLoaded
event in modern browsers, so it'll run before your images are loaded. If you only need the layout fixed before displaying everything, you can use ready()
or DOMContentLoaded
, but be sure to explicitly specify the image dimensions in HTML.