ready() v. onLoad()

Executing Code After Page Has Loaded

It is very common to perform some initialization code in Javascript immediately after the page has loaded. Things such as:

In the old days, you would start this initialization code by:

<body onLoad="initializationFunction();">

In an effort to separate objects from behaviors, jQuery programmers will do this:

...
</body>
<script type="text/javascript">
$(document).ready(function(){
	statements go here
});
</script>
</html>

jQuery's ready event will fire when the DOM is loaded, which is typically all you are waiting for. Images may not be loaded yet and perhaps some internal layout calculations are not done.

If you need to wait for the page to fully display before running the initialization code then do:

...
</body>
<script type="text/javascript">
$(window).load(function(){
	statements go here
});
</script>
</html>