Question

I know there are some ways to get notified when the page body has loaded (before all the images and 3rd party resources load which fires the window.onload event), but it’s different for every browser.

Is there a definitive way to do this on all the browsers?

So far I know of:

• DOMContentLoaded : On Mozilla, Opera 9 and newest WebKits. This involves adding a listener to the event:

  document.addEventListener( ‘DOMContentLoaded’, [init function], false );

• Deferred script: On IE, you can emit a SCRIPT tag with a @defer attribute, which will reliably only load after the closing of the BODY tag.

• Polling: On other browsers, you can keep polling, but is there even a standard thing to poll for, or do you need to do different things on each browser?

I’d like to be able to go without using document.write or external files.

This can be done simply via jQuery:

$(document).ready(function() { ... }) 

but, I’m writing a JS library and can’t count on jQuery always being there.

Answer 1

There’s no cross-browser method for checking when the DOM is ready — this is why libraries like jQuery exist, to abstract away nasty little bits of incompatibility.

Mozilla, Opera, and modern WebKit support the DOMContentLoaded event. IE and Safari need weird hacks like scrolling the window or checking stylesheets. The gory details are contained in jQuery’s bindReady() function.