How to Use Window.onload() Event

Any DOM manipulation code which depends on the DOM elements located at the head section of the html page, this code will be executed first before the DOM is fully ready. However error may occurs. Therefore, it is required to put the codes inside a callback function which will be fire when the DOM is fully loaded. If the code is place after the body element, the code will be executed smoothly after the DOM is fully loaded. No wrapping of code in the special callback function is require anymore.

Window.onload()  or window.load() is Javascript pure load event. The purpose of this event is to ensure that the page and its resources which include images, css, script, files are being loaded. This may take more time than $(document).ready().

window.onload = function() {
  init();
  doSomethingElse();
};

 

What is the different between Window.onload() and $(document).ready()

  • Time contraints – Window.onload() may take longer time to check the DOM is ready or not
  • Window.onload() are created to check the page and resources load complete. Whereas for $(document).ready() is just to check Javascript, Jquery code is ready to execute or not.

 

Window.onload() is well supported widely from old to new browser.

One thought on “How to Use Window.onload() Event

  1. Pingback: JSON Method – Web / Application Development Blog

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s