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.
Create a file and name it as
domReady.html.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>
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.
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>