Click here to Skip to main content
12,395,208 members (64,492 online)
Click here to Skip to main content
Add your own
alternative version

Stats

247.6K views
19 bookmarked
Posted

JavaScript's $(document).ready vs. $(window).load

, 16 Sep 2013 CPOL
Rate this:
Please Sign up or sign in to vote.
A most common event

Introduction

A common question on (web) programming forums for beginners, you can find the "How do I perform various actions as soon as the page loads on the client side in JavaScript?"

These questions will mostly be answered by either "Use document.ready" or "Use window.load" sporadically.

It is quite common that people need to attach some actions to the Page_Load event on the client side. However there are two main functions that I frequently see mixed with each other when served to the beginning programmer, confusing when to use which.

Misusing document.ready and window.load can at times be irrelevant but on other occasions may prove critically wrong programming, especially when UI manipulation is crucial!

document.ready (jQuery)

document.ready will execute right after the HTML document is loaded property, and the DOM is ready.

DOM: The Document Object Model (DOM) is a cross-platform and language-independent convention for representing and interacting with objects in HTML, XHTML and XML documents.

$(document).ready(function()
{
   // executes when HTML-Document is loaded and DOM is ready
   alert("(document).ready was called - document is ready!");
});

document.ready (a jQuery event) will fire when all the elements are in place, and they can be referenced in the JS code, but the content is not necessarily loaded.

 Warning - If you want to use the Height, Width properties of an image for example, then document.ready is a deal braker!!

// Another interesting approach for this event:
document.observe("dom:loaded", function() 
{
   // do_stuff();
});

* See more on document.observe on prototypejs.org

window.load (Built-in JavaScript)

The window.load however will wait for the page to be fully loaded, this includes inner frames, images etc.

$(window).load(function() 
{
   // executes when complete page is fully loaded, including all frames, objects and images
   alert("(window).load was called - window is loaded!");
});  

* window.load is a built-in JavaScript method, it is known to have some quirks in old browsers (IE6, IE8, old FF and Opera versions) but will generally work in all of them.

window.load can be used in the body's onload event like this (but I would strongly suggest you avoid mixing code like this in the HTML, as it is a source for confusion later on):

<html>

 <head>

  <script>
   function foo()
   {
    alert("Page loaded!");
   }
  </script>

 </head>

 <body onload="foo()">
  <h1>I didn't do it!</h1>
 </body>

</html> 

 Warning - Do not confuse the load method of the window element with the jQuery AJAX's load method!!!

// This is the AJAX load
$("#MyDivID").load("content_page.txt"); 

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Joezer BH
Chief Technology Officer
United States United States
Senior dish washing consultant for over 25 years!

You may also be interested in...

Comments and Discussions

 
QuestionA better one ...you can find below Pin
K K Kodoth6-May-15 6:06
professionalK K Kodoth6-May-15 6:06 
GeneralMy vote of 1 Pin
K K Kodoth6-May-15 6:02
professionalK K Kodoth6-May-15 6:02 
Generalmy vote 5 Pin
Paulo Augusto Künzel21-Oct-13 0:14
professionalPaulo Augusto Künzel21-Oct-13 0:14 
GeneralRe: my vote 5 Pin
Canny Brisk21-Oct-13 1:23
professionalCanny Brisk21-Oct-13 1:23 
GeneralMy vote of 5 Pin
Carsten V2.016-Sep-13 6:10
memberCarsten V2.016-Sep-13 6:10 
GeneralRe: My vote of 5 Pin
Canny Brisk16-Sep-13 20:23
professionalCanny Brisk16-Sep-13 20:23 
SuggestionAlternative... Pin
Nitij Kumar16-Sep-13 5:02
professionalNitij Kumar16-Sep-13 5:02 
NewsRe: Alternative... Pin
Canny Brisk16-Sep-13 20:27
professionalCanny Brisk16-Sep-13 20:27 
GeneralRe: Alternative... Pin
Nitij Kumar16-Sep-13 21:11
professionalNitij Kumar16-Sep-13 21:11 
GeneralMy vote of 4 Pin
dholakiya ankit2-Sep-13 23:10
professionaldholakiya ankit2-Sep-13 23:10 
GeneralRe: My vote of 4 Pin
Canny Brisk3-Sep-13 3:33
professionalCanny Brisk3-Sep-13 3:33 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.160721.1 | Last Updated 16 Sep 2013
Article Copyright 2013 by Joezer BH
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid