Performing Tasks on Page Load

We have already seen how to make jQuery react to the loading of a web page. The $(document).ready() event handler can be used to fire off a function’s worth of code, but there’s a bit more to be said about it.

Timing of Code Execution

In Chapter 1, we noted that $(document).ready() was jQuery’s way to perform tasks that were typically triggered by JavaScript’s built-in onload event. While the two have a similar effect, however, they trigger actions at subtly different times.

The window.onload event fires when a document is completely downloaded to the browser. This means that every element on the page is accessible to JavaScript, which is a boon for writing featureful code without worrying about load order.

On the other hand, a handler registered using $(document).ready() is invoked when the DOM is completely ready for use. This also means that all elements are accessible by our scripts, but does not mean that every associated file has been downloaded. As soon...