Difference between document.ready and window.onload or pageLoad

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">
$(document).ready(function(){ 
 // Gets called as soon as DOM is ready
 //code here
 }); 
 </script> 

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 
}
 </script> 

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

Since we know, in asp.net 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
 } 
$(document).ready(function(){ 
 // code for one time initialization
}); 
</script> 
<asp:ScriptManager ID="ScriptManger1" runat="server" /> 
<asp:UpdatePanel ID="UpdatePanel1" runat="server"> 
<ContentTemplate> 
<!-- Asp.net Controls Here --> 
</ContentTemplate> 
 </asp:UpdatePanel> 

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

If you are using AJAX on your asp.net 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.
 }); 
 </script> 

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"

Note

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.

Summary

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.