jQuery ready Property

What Is jQuery.ready?

jQuery.ready is a thenable (Promise-like object) that resolves when the document DOM is ready to manipulate (since jQuery 1.8). .ready() callbacks use this signal.

// Official pattern
$.when($.ready).then(function () {
  // Document is ready
});

// Combine with Ajax
$.when($.getJSON("ajax/test.json"), $.ready)
  .done(function (data) {
    // DOM ready + JSON loaded
  });

// Everyday callback form (related API)
$(function () { /* same ready moment */ });

How to Use jQuery.ready

Pass the thenable to $.when or Promise.resolve, then run DOM code.

1. Include jQuery before your script.
2. Pass $.ready (same as jQuery.ready) to $.when() or Promise.resolve().
3. In .then / .done, select elements and attach handlers.
4. For everyday scripts, prefer $(fn); use $.ready when combining with Ajax or other promises.

Pseudocode

signal = jQuery.ready   // thenable, not a callback

when signal resolves:
    DOM is safe to query and change

// Official idea:
$.when($.ready).then(runDomCode)

// With another async task:
$.when(fetchJson, $.ready).done(useBoth)

// Related everyday form:
$(runDomCode)   // same ready moment, callback style

Cheat Sheet

Keep these facts handy while waiting for the DOM.

Live Preview

This page is already loaded, so $.ready resolves immediately — same idea as waiting in a real document.

Ready — pick a pattern and run.

jQuery Examples

Short, copy-ready snippets. Open DevTools Console, or use Try It Yourself for a live editor.

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

The DOM is now loaded and can be manipulated.

// Same idea as: $.when($.getJSON(url), $.ready)
var task = $.Deferred().resolve({ msg: "hello" }).promise();

$.when(task, $.ready).done(function (data) {
  // Document is ready.
  // Value from the async task is passed as `data`.
  $("#out").text(data.msg);
});

hello

Promise.resolve($.ready).then(function () {
  document.getElementById("status").textContent = "DOM ready via Promise.resolve";
});

DOM ready via Promise.resolve

// Everyday callback (recommended for simple pages)
$(function () {
  console.log("ready via $(fn)");
});

// Thenable — best when combining with other async work
$.when($.ready).then(function () {
  console.log("ready via $.when($.ready)");
});

ready via $(fn)
ready via $.when($.ready)

Performance Notes

Ready handlers are cheap. Put only setup work here — avoid heavy work that blocks first paint. Defer non-critical fetches when you can.

Key Takeaways