Display HTML content once the layout phase is complete

Question

I'd like to display content once everything is available and correctly positioned in the web page. Most preloader techniques only consider download time, not rendering time, therefore letting the user seeing the page being constructed. That's short, but clearly noticeable. I'm using WebKit inside a native app, but that shouldn't matter.

What is the correct approach to delay content display until the page is completely ready?

Answer 1

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.