Executing functions when page has loaded

AJAX applications make extensive use of JavaScript to manipulate the content and the look and feel of web pages. Web pages should have the DOM loaded before any JavaScript code tries to perform any such modification on it.

This recipe will explain how to execute the JavaScript after the content has been loaded and the DOM is ready.

Getting ready

Get a copy of the latest version of the jQuery library.

How to do it...

1. Create a file and name it as domReady.html.

2. To run any JavaScript code only after the DOM has completely loaded, write it between the curly braces of .ready() method:

   <script type="text/javascript">
       $(document).ready(function () {
         // code written here will run only after the DOM has loaded
       });
   </script>

How it works...

jQuery ensures that code written inside .ready() gets executed only after the DOM is fully loaded. This includes the complete document tree containing the HTML, stylesheets, and other scripts. You can, therefore, manipulate the page, attach events, and do other stuff. Note that .ready() does not wait for images to load. Images can be checked using the .load() method, which is explained in a separate recipe in this chapter.

If .ready() is not used, the jQuery code does not wait for the whole document to load. Instead it will execute as it is loaded in the browser. This can throw errors if the written code tries to manipulate any HTML or CSS that has not been loaded yet.

Passing a handler to .ready()

In the previous example code we used an anonymous function with .ready(). You can also pass a handler instead of the anonymous function. It can be done as follows:

<script type="text/javascript">
    $(document).ready(doSomething);
    function doSomething()
    {
      // write code here
    }
</script>

Another method of using .ready()

Instead of writing the code in the above mentioned format, we can also use one of the below described variations for finding out when the DOM is ready:

$(function ()
{
});

Or

$(doSomething);
function doSomething()
{
// DOM is ready now
}

Multiple .ready() methods

If there are multiple script files in your application, you can have a .ready() for each of them. jQuery will run all of these after DOM loads. An example scenario may be when you are using some plugins on a page and each one of them has a separate .js file.