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.
window.load can at times be irrelevant but on other occasions may prove critically wrong programming, especially when UI manipulation is crucial!
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.
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!!
* See more on document.observe on prototypejs.org
window.load however will wait for the page to be fully loaded, this includes inner frames, images etc.
alert("(window).load was called - window is loaded!");
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):
<h1>I didn't do it!</h1>
Warning - Do not confuse the
load method of the
window element with the jQuery AJAX's load method!!!