Difference between document.ready and window.onload or pageLoad

PageLoad() and jQuery’s $(document).ready() events do the same and seem too similar but in different time. $(document).ready() and pageLoad() methods are very much differ in functioning. In this article, I will explain the major differences between $(document).ready() and pageLoad() methods.

  1. Introducing $(document).ready()
    JQuery’s document.ready() method gets called as soon as DOM is ready (means browser has parsed the HTML and built the DOM tree). It is cross browser compatible means behave equally on all browsers. If your web page has large images, it will not wait for loading of images completely. Hence it may called before pageLoad() method. We can have multiple document.ready() methods on a web page that will be called in coming sequence.<script type=”text/javascript”>
    // Gets called as soon as DOM is ready
    //code here
  2. Introducing window.onload (pageLoad() )
    pageLoad() method gets called when images and all associated resources of the page have been fully loaded. Suppose your web page has large size images then until all the images are not fully loaded on the page, pageLoad() method will not called. pageLoad() method is not browser compatible. We can have only one pageLoad() method on a web page.<script type=”text/javascript”> function pageLoad()
    // gets called when page have been fully loaded
    //code here

Reference link: http://www.dotnet-tricks.com/Tutorial/aspnet/D719120612-Difference-between-document.ready-and-window.onload-or-pageLoad.html