ansaurus

Question

Getting notified when the page DOM has loaded (but before window.onload)

Answer 1

+1 A:

Just take the relevant piece of code from jQuery, John Resig has covered most of the bases on this issue already in jQuery.

Sijin 2008-09-15 18:32:15

Answer 2

A:

This works pretty well:

setTimeout(MyInitFunction, 0);

Dave Ward 2008-09-15 18:35:11

No it doesn't. It's not reliable by a long shot. Sorry. :-/

Már Örlygsson 2008-10-30 02:32:40

Answer 3

+5 A:

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.

John Millikin 2008-09-15 18:40:52

Answer 4

+2 A:

YUI uses three tests to do this: for Firefox and recent WebKit there's a DOMContentLoaded event that is fired. For older Safari the document.readyState watched until it becomes "loaded" or "complete". For IE an HTML <P> tag is created and the "doScroll()" method called which should error out if the DOM is not ready. The source for YAHOO.util.Event shows YUI-specific code. Search for "doScroll" in the Event.js.

Michael Cramer 2008-09-15 18:45:43

Answer 5

+3 A:

Using a library like jQuery will save you countless hours of browsers inconsistencies.

In this case with jQuery you can just

$(document).ready ( function () {
    //your code here
});

If you are curious you can take a look at the source to see how it is done, but is this day and age I don't think anyone should be reinventing this wheel when the library writer have done all the painful work for you.

Pat 2008-09-15 19:50:20

Answer 6

+3 A:

I found this page, which shows a compact self-contained solution. It seems to work on every browser and has an explanation on how:

http://www.kryogenix.org/days/2007/09/26/shortloaded

levik 2008-09-15 21:27:08

Answer 7

A:

Using setTimeout can work quite well, although when it's executed is up to the browser. If you pass zero as the timeout time, the browser will execute when things are "settled".

The good thing about this is that you can have many of them, and don't have to worry about chaining onLoad events.

setTimeout(myFunction, 0);
setTimeout(anotherFunction, 0);
setTimeout(function(){ doSomething ...}, 0);

etc.

They will all run when the document has finished loading, or if you set one up after the document is loaded, they will run after your script has finished running.

The order they run in is not determined, and can change between browsers. So you can't count on myFunction being run before anotherFunction for example.

hulver 2008-09-16 09:10:47

The whole point is to have the JS execute as early as possible, but not before all of the page's DOM is in place - this will allow one to inspect the DOM without waiting for potentially slow images to load.

levik 2008-09-16 14:57:42

It's not guaranteed to work correctly. This article explains why: http://snook.ca/archives/javascript/settimeout_solve_domcontentloaded/

Morgan Cheng 2009-01-28 11:14:29

Answer 8

A:

Why not this:

<body>  
  <!-- various content -->  
  <script type="text/javascript">  
  <!--  
    myInit();  
  -->
  </script>  
</body>

If I understand things correctly, myInit is gonna get executed as soon as browser hit it in the page, which is last thing in a body.

Slartibartfast 2008-09-16 10:37:11

Unfortunately, this simple solution doesn't work if I don't have control of the page - such as when creating a JS library that will be included via a <script> tag.

levik 2008-09-16 14:56:36

ansaurus

tags:

views:

answers:

Getting notified when the page DOM has loaded (but before window.onload)

related questions