what is the difference between window.onload and document.ready.
+3
A:
The ready event occurs after the HTML document has been loaded, while the onload event occurs later, when all content (e.g. images) also has been loaded.
The onload event is a standard event in the DOM, while the ready event is specific to jQuery. The purpose of the ready event is that it should occur as early as possible after the document has loaded, so that code that adds funcionality to the elements in the page doesn't have to wait for all content to load.
Guffa
2010-09-13 06:28:21
Note that the `ready` event is an extension defined by jQuery, whereas `onload` is built-in.
Piskvor
2010-09-13 07:43:53
@Piskvor: Good point, that is also an important difference.
Guffa
2010-09-13 08:30:18
A:
The window onload function is called when the browser hides the loading bar, the document ready function is executed when the DOM (HTML nodes) are ready to edit.
elektronikLexikon
2010-09-13 06:29:37
+1
A:
window.onload is the built-in Javascript event, but as its implementation had subtle quirks across browsers (FF/IE6/IE8/Opera), jQuery provides document.ready, which abstracts those away, and fires as soon as the page's DOM is ready (doesn't wait for images etc.).
document.ready is a jQuery function, wrapping and providing consistency to the following events:
document.ondomcontentready/document.ondomcontentloaded- a newish event which fires when the document's DOM is loaded (which may be some time before the images etc. are loaded); again, slightly different in IE and in rest of the world- and window.onload (which is implemented even in old browsers), which fires when the entire page loads (images, styles, etc.)
Piskvor
2010-09-13 06:30:04
There's a slight misconception here: the `load` event of `window` is implemented reasonably consistently across browsers. The problem that jQuery and other libraries are trying to solve is the one you mentioned, which is that the `load` event is not fired until all dependent resources such as images and stylesheets have loaded, which could be a long time after the DOM is completely loaded, rendered and ready for interaction. The event that fires in most browsers when the DOM is ready is called `DOMContentLoaded`, not `DOMContentReady`.
Tim Down
2010-09-13 08:31:45
@Tim Down: *reasonably* is the key word here; at least some object sniffing used to be necessary, even with `onload` (there are differences wrt FF/IE/Opera). As for the `DOMContentLoaded`, you are entirely correct. Editing to clarify.
Piskvor
2010-09-13 08:44:33
@Tim Down: IIRC, Opera's `window.onload` didn't work correctly (as of 9.04), so you had to sniff for window.opera and hook `document.onload`; also, there was (is?) a different way of registering for events in IE and in normal browsers (`window.onload=function(){}` works everywhere, yes, but clobbers whatever was there previously). I may not recall this clearly, as jQuery's `document.ready` has freed me from this kind of drudgery, many years ago :)
Piskvor
2010-09-13 09:16:17
OK. Opera has had `window.onload` for ages (since version 7 maybe? Certainly prior to version 9). Not sure what your point about IE is: are you referring to what happens when both `window.onload` is assigned and `<body>` has an `onload` attribute? That does indeed vary between browsers, but that situation should simply be avoided. Agreed that a library does simplify this kind of thing, but in general, `window.onload = function() { ... };` works well in all major browsers so long as there's no `onload` attribute in the `<body>` element.
Tim Down
2010-09-13 10:30:49
@Tim Down: I know Opera *had* it, but the event trigger on it was slightly quirky (to trigger reliably, `document.onload` was usable). As far as the window.onload goes: `window.onload = fn1;window.onload=fn2;` - only fn2 would get invoked onload. Some free webhosts insert their own code into documents, and sometimes this clobbered the in-page code.
Piskvor
2010-09-13 11:06:29