Please enable Javascript to correctly display the contents on Dot Net Tricks!

Difference between document.ready and window.onload or pageLoad

  Author : Shailendra Chauhan
Updated On : 14 Jul 2012
Total Views : 30,924   

We think pageLoad() and jQuery’s $(document).ready() events do the same. Both methods seem too similar in simple demo example. But $(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.

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

Introducing 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 

Introducing Update Panel Partial PostBack with pageLoad() and $(document).ready()

Since we know, in update panel gets partially postback to the server. Hence If you are using $(document).ready() and pageLoad() methods on the page, it is mandatory to know the difference between both the methods.

pageLoad() methods is called each and every partial postback of update panel but $(document).ready() is not called each and every partial postback of update panel. $(document).ready() is called only one time (during first time of page loading). Hence code written in $(document).ready() method will not be initialized each and every partial postback.

 <script type="text/javascript">
 function pageLoad() 
// code for initialization in each and every partial postback
 // code for one time initialization
<asp:ScriptManager ID="ScriptManger1" runat="server" /> 
<asp:UpdatePanel ID="UpdatePanel1" runat="server"> 
<!-- Controls Here --> 

An ASP.NET AJAX alternative to $(document).ready()

If you are using AJAX on your web page then you can use Application.add_init() method in place of $(document).ready() for one time initialization.

 <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
 <script type="text/javascript"> 
 Sys.Application.add_init(function() { 
 // Initialization code here, meant to run once.

Note that to call Application.add_init, we need to place it after the ScriptManager. This is required because the ScriptManager injects its reference to MicrosoftAjax.js at that location. Attempting to reference the Sys object before Script Maanager will throw a javascript error "sys is undefined"


  1. $(document).ready()

    1. Best for onetime initialization.

    2. Called as soon as DOM is ready; may called slightly before than pageLoad().

    3. Cross browser compatible.

    4. Unable to re-attach the functionality to elements/controls of the page affected by partial postbacks.

  2. pageLoad()

    1. Not best for onetime initialization if used with UpdatePanel.

    2. Not Cross browser compatible.

    3. Best to re-attach the functionality to elements/controls of the page affected by partial postbacks with UpdatePanel.

  3. Application.Init()

    1. Useful for one time initialization if only ASP.NET AJAX is available.

    2. More work required to wire the event up.

    3. "sys is undefined" javascript error may occurs if you are not careful.


In this article I try to expose document.ready() and window.onload/pageLoad(). I hope after reading this article you will be able to understand the use of both these methods. I would like to have feedback from my blog readers. Please post your feedback, question, or comments about this article.

Free Interview Books
PPC Marketing (offline)

Sat, Sun 09:00 AM-10:30 AM IST

Know More
AngularJS Development (online)

MON-FRI 08:00 PM-09:30 PM IST.

Know More
26 OCT
ASP.NET MVC with AngularJS Development (online)

MON-FRI 07:30 AM-09:00 AM IST

Know More
24 OCT
NodeJS Development (online)

MON-FRI     06:00 AM - 07:30 AM IST

24 OCT
MEAN Stack Development (online)

MON-FRI     06:00 AM -07:30 AM IST

22 OCT
ASP.NET MVC with AngularJS Development (offline)

SAT,SUN     08:00 AM-09:30 AM

12 OCT
ASP.NET MVC with AngularJS Development (online)

Mon-Fri     09:30 PM-11:00 PM IST

17 SEP
ASP.NET MVC with AngularJS Development (offline)

SAT,SUN     05:00 PM-06:30 PM IST

NodeJS Development (offline)

Sat, Sun     11:00 AM-12:30 PM IST


Professional Speaks