Menu
The general idea is that window. onload fires when the document's window is ready for presentation and document. onload fires when the DOM tree (built from the markup code within the document) is completed.
“window. onload” will execute code when browser has loaded the DOM tree and all other resources like images, objects, etc. onDocumentReady executes when the DOM tree is built, without waiting for other resources to load.
ready function event executes a bit earlier than window. onload and is called once the DOM(Document object model) is loaded on your page. It will not wait for the images, frames to get fully load. I think this is the best answer!
The onload property processes load events after the element has finished loading. This is used with the window element to execute a script after the webpage has completely loaded.
window.onload = myOnloadFunc and <body onload="myOnloadFunc();"> are different ways of using the same event. Using window.onload is less obtrusive though - it takes your JavaScript out of the HTML.
All of the common JavaScript libraries, Prototype, ExtJS, Dojo, JQuery, YUI, etc. provide nice wrappers around events that occur as the document is loaded. You can listen for the window onLoad event, and react to that, but onLoad is not fired until all resources have been downloaded, so your event handler won't be executed until that last huge image has been fetched. In some cases that's exactly what you want, in others you might find that listening for when the DOM is ready is more appropriate - this event is similar to onLoad but fires without waiting for images, etc. to download.
There is no difference, but you should not use either.
In many browsers, the window.onload event is not triggered until all images have loaded, which is not what you want. Standards based browsers have an event called DOMContentLoaded which fires earlier, but it is not supported by IE (at the time of writing this answer). I'd recommend using a javascript library which supports a cross browser DOMContentLoaded feature, or finding a well written function you can use. jQuery's $(document).ready(), is a good example.
window.onload can work without body. Create page with only the script tags and open it in a browser. The page doesn't contain any body, but it still works..
<script>
function testSp()
{
alert("hit");
}
window.onload=testSp;
</script>
I prefer, generally, to not use the <body onload=""> event. I think it's cleaner to keep behavior separated from content as much as possible.
That said, there are occasions (usually pretty rare for me) where using body onload can give a slight speed boost.
I like to use Prototype so I generally put something like this in the <head> of my page:
document.observe("dom:loaded", function(){
alert('The DOM is loaded!');
});
or
Event.observe(window, 'load', function(){
alert('Window onload');
});
The above are tricks I learned here. I'm very fond of the concept of attach event handlers outside of the HTML.
(Edit to correct spelling mistake in code.)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With