Search within TutorialsPark

Jquery DOM Ready


Understand the Syntax used to wait for the Document to get ready.


Jquery Syntax : Waiting for the DOM

For the jQuery script to execute correctly, the browser must have downloaded all object in the DOM completely before the script begins to execute.

This is done by passing the document variable to the function $ , and then calling the ready method with the function to be executed when the DOM is ready(i.e loaded completely)

Syntax: Jquery ready function

Example: Jquery ready function

Give it a TRY! » Note:This method ensures that script will be executed correctly no matter where it is placed in the Document


Jquery DOM Waiting : Using an alternative Notation

An alternative approach is to pass your function as a parameter to the jQuery $ function.

It is equivalent of using the $(document).ready approach.

Syntax: Jquery Syntax to wait for the DOM to get ready

Example: Jquery Syntax to wait for the DOM to get ready

Give it a TRY! » Note: The alternative Notation performs defers the execution of the Function until the DOM is ready.


Jquery Syntax : Deferring the ready Event

You can even control when the ready event is triggered by using the method holdready , it is useful when external resources are loaded dynamically.

The method holdready must be called before the ready event is triggered, and the function can be called again when ready by setting the value of holdready as false.

In the demo below, the method holdready method is called at the start of the script, and the setTimeout method is used to invoke the function after 3000ms.

Finally, the ready event is triggered again by calling the holdready method with the argument as false.

Syntax: Jquery Deferring Ready Event

Example: Jquery Deferring Ready Event

Give it a TRY! » Note:The ready event is delayed after 3 seconds.


Note: The method holdready can be called a number of times.