Tuesday, December 4, 2018

Difference between window.onload and document.ready


window.load - It is fired when everything on the page is loaded.  By everything I mean that when the DOM is loaded, when all the related images to that page is ready and the CSS is ready and all the attached resources are ready.
After waiting for all these resources to load, it will take a lot of time to fire the window.load. So, by using this we have to wait for the all the resources to load and modifies the page or hooks up event handlers, etc...
Syntax : 
  1. window.onload = function(e){
  2. console.log("Window is loaded !!");
  3. }
$(document).ready() - It fires as soon as the DOM is ready for manipulation. By this I mean that when my HTML page is ready the events and all the thing inside document ready is fired, it will not wait for other resources to load such as images as it will take a longer time to load into the browser as there are manty  images which takes a longer than to load into the browser.
Secondly, when all the object in the HTML page is been parsed and initialized and all the script is loaded, it will fire the events.
It is a very useful approach to use document ready as If we want to differ some part of the web page from browser to browser as after loading DOM element we can check the browser and display the particular thing for each one.

The $(document).ready() uses different mechanism to detect when the DOM is ready in its 1.6.x version, the preferred one is when the DOM content is loaded.
But it is supported by some smart browsers.
Syntax : 

  1. $(document).ready(function(){
  2. console.log("document is loaded !!");
  3. }

No comments:

Followers

Link