jQuery .ready() Method

What Is .ready()?

.ready(handler) (since 1.0) runs a function when the DOM is safe to manipulate — a good time to bind events and initialize plugins. Since jQuery 3.0, the recommended call is $(handler).

// Recommended (jQuery 3.0+)
$(function () {
  // DOM is ready
});

// Equivalent (deprecated selection form, still works)
$(document).ready(function () {
  // DOM is ready
});

// Not the same as window load (images/assets):
// $(window).on("load", fn);

How to Use .ready()

Pass a function to jQuery; it runs as soon as the DOM is ready — even if you register late.

1. Include jQuery before your init script.
2. Call $(function () { … }) (recommended) or $(document).ready(fn).
3. Inside the handler, select elements, bind events, and start plugins.
4. Add more $(fn) calls if needed — they run in order.
5. Use $(window).on("load", fn) only when you need fully loaded assets.

Pseudocode

call $(handler)   // or .ready(handler)

if DOM is not ready yet:
    queue handler for later
else:
    run handler now

when DOM becomes ready:
    for each queued handler in order:
        try:
            call handler(jQuery)
        catch error:
            call jQuery.readyException(error)
            // jQuery 3.0+: continue with next handler

Cheat Sheet

Keep these facts handy while initializing page scripts.

Live Preview

Because this page is already loaded, $(fn) runs immediately — the same API you use at the top of a script.

Ready — pick an action and click Run.

jQuery Examples

Short, copy-ready snippets. Prefer $(function () { … }) for new code.

$(function () {
  $("p").text("The DOM is now loaded and can be manipulated.");
});

The DOM is now loaded and can be manipulated.

$(document).ready(function () {
  $("#status").text("Ready via $(document).ready()");
});

#status → Ready via $(document).ready()
Timing matches $(function(){ … })

$(function () {
  $("#log").append("A ");
});

$(function () {
  $("#log").append("B ");
});

$(function () {
  $("#log").append("C");
});

#log → A B C
(registered order preserved)

var jq2 = jQuery.noConflict();

jq2(function ($) {
  // $ is jQuery here; global $ may belong to another library
  $("#out").text("Ready with local $ alias");
});

#out → Ready with local $ alias
Handler arg $ === jQuery inside the callback

$(function () {
  $("#log").append("DOM ready\\n");
});

$(window).on("load", function () {
  $("#log").append("window load (assets done)\\n");
});

DOM ready
window load (assets done)

(ready always comes first)

Performance Notes

Ready itself is inexpensive. Keep handlers focused on setup; move large computations or network work out of the critical path.

Key Takeaways