The jQuery .ready() method runs your code when the DOM is parsed and safe to manipulate. This tutorial covers the recommended $(function(){}) shorthand, handler ordering, comparisons with DOMContentLoaded and window load, the jQuery.noConflict() pattern, and how .ready() relates to jQuery.ready.
Shorthand
Parse done
In order
Still runs
Before imgs
$(fn) only
jQuery scripts usually need HTML elements to exist before they can select nodes, attach events, or change the page. If your script runs in the <head> before the body markup appears, $("#menu") finds nothing.
The .ready( handler ) method solves that by queueing your function until jQuery detects the document is ready — the same timing as the browser’s DOMContentLoaded event, but with jQuery’s reliable late-registration behavior.
Most developers never write .ready explicitly. They use the shorthand $(function(){ ... }) — the pattern you will see in virtually every jQuery tutorial and plugin.
.ready() Method.ready( handler ) accepts one argument: a function with no parameters. jQuery calls it when the DOM is ready. The method returns the same jQuery object it was called on (usually jQuery(document) or the collection from $(fn)), so you can chain if needed.
Handlers run in the order they were registered. Since jQuery 3.0, if one handler throws an error, later handlers still execute — jQuery isolates exceptions so one bad plugin does not break the entire page.
Put page initialization inside $(function(){ ... }). Use $(window).on("load", fn) only when you need images or other assets fully downloaded first.
Register a callback for document ready:
.ready( handler )// Recommended shorthand
$(function () {
// Handler for .ready() called.
});
// Equivalent long form
$(document).ready(function () {
// Same timing as above.
});handler (Function) — callback executed when the DOM is ready..ready() was invoked on.$("img").ready(fn) — misleading; does not wait for images.$("document").ready(fn) — selects nothing; still worked historically.$(document).on("ready", fn) — removed in jQuery 3.0.| Expression | Meaning |
|---|---|
$(fn) | Recommended ready shorthand (3.0+) |
$(document).ready(fn) | Explicit equivalent |
$(window).on("load", fn) | All assets loaded — different event |
document.addEventListener("DOMContentLoaded", fn) | Native — misses late registration |
$.when($.ready).then(fn) | Promise-style — see jQuery.ready |
Multiple $(fn) calls | Run in registration order |
.ready() vs DOMContentLoaded vs loadThree timing hooks — pick the one that matches what your code needs.
DOM parsedDefault jQuery init
nativeNo late bind
all assetsImages ready
thenableCompose w/ Ajax
Examples follow the official jQuery .ready() documentation. Use jQuery 3.7.1 in DevTools or the Try-it links.
Official ready demo — update text when the DOM is loaded.
Change paragraph text when the DOM is ready — recommended $(function(){}) form.
$(function () {
$("p").text("The DOM is now loaded and can be manipulated.");
});jQuery waits until elements exist, then runs your callback. The paragraph is in the HTML before the script — by ready time, jQuery can select and update it safely.
Long form syntax, handler queues, noConflict, and load timing.
$(document).ready() Long FormExplicit document binding — identical timing to the shorthand.
$(document).ready(function () {
// Handler for .ready() called.
$("#status").text("Ready via $(document).ready()");
});Both forms queue on the same internal ready list. Prefer $(fn) in new code — shorter and the jQuery 3.0 recommended idiom.
Successive $(fn) calls execute FIFO when DOM is ready.
$(function () {
console.log("First ready handler");
});
$(function () {
console.log("Second ready handler");
});
$(document).ready(function () {
console.log("Third ready handler");
});Plugins and app code can each register their own ready block. jQuery flushes the queue once — order matches registration, which keeps init predictable across files.
jQuery.noConflict() PatternReady handler receives $ as first argument when using an aliased jQuery object.
var jq2 = jQuery.noConflict();
jq2(function ($) {
// Code using $ as usual; actual jQuery object is jq2
$("p").text("Ready with noConflict — $ works inside handler");
});When global $ belongs to another library, pass a function to jq2. jQuery injects a local $ parameter scoped to your ready callback — official docs pattern for coexistence.
.ready() vs $(window).on("load")Ready fires before images finish — use load when you need image dimensions.
$(function () {
var img = $("#hero")[0];
console.log("Ready — img width:", img.width); // often 0
});
$(window).on("load", function () {
var img = $("#hero")[0];
console.log("Load — img width:", img.width); // natural width
});The official docs warn: do not attach a load listener inside ready expecting it to fire if load already passed. For dynamically injected scripts, ready handlers still run; window load may have already occurred.
$(fn) independently.noConflict ready pattern..ready() Queues Your Callback$(fn) pushes function onto jQuery’s ready list.
Browser builds tree; jQuery listens for ready signal.
Handlers run in order; jQuery.ready thenable resolves.
Select elements, wire UI, start widgets — before full page load.
$(handler) shorthand is recommended for new code.$(document).on("ready", fn) removed in jQuery 3.0.DOMContentLoaded.DOMContentLoaded or defer on script tags..ready() works wherever jQuery runs. jQuery normalizes ready timing across browsers, including legacy IE behavior before DOMContentLoaded was universal.
Supported in jQuery 1.x, 2.x, and 3.x. Native DOMContentLoaded is available in all modern browsers for non-jQuery code.
Bottom line: Default entry point for jQuery pages — wrap DOM work in $(function(){}) unless you need window load or explicit promise composition.
The jQuery .ready() method is how almost every jQuery page starts — queue a function that runs when the DOM is safe to touch. Use $(function(){}) for everyday work; reach for $(window).on("load") when assets must finish first.
For promise-style composition with Ajax, continue to jQuery.ready. For advanced legacy loaders, see jQuery.holdReady().
$(function(){})$(window).on("load") for image-dependent layoutjq2(function($){}) after noConflict()$("img").ready(fn) in new code.ready()Run code when the DOM is parsed — not when all assets load.
Shorthand
DailyNot load
TimingFIFO queue
QueueStill runs
BindRecommended
ModernPassing a function directly to jQuery — $(fn) — is not magic syntax. jQuery checks whether the first argument is a function and, if so, treats it as a ready handler rather than a selector string. That is why $(function(){}) works even though no elements are selected. jQuery 3.0 narrowed official recommendations to this form because variants like $("img").ready(fn) confused beginners into thinking ready waited for images to load.
Compose document timing with Ajax using the jQuery.ready thenable.
6 people found this page helpful