Skip to content


Subversion checkout URL

You can clone with
Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

59 lines (47 sloc) 1.664 kB
title level
$( document ).ready()

A page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you. Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute. Code included inside $( window ).load(function() { ... }) will run once the entire page (images or iframes), not just the DOM, is ready.

// A $( document ).ready() block.
$( document ).ready(function() {
    console.log( "ready!" );

Experienced developers sometimes use shorthand for $( document ).ready(). If you are writing code that people who aren't experienced with jQuery may see, it's best to use the long form.

// Shorthand for $( document ).ready()
$(function() {
    console.log( "ready!" );

You can also pass a named function to $( document ).ready() instead of passing an anonymous function.

// Passing a named function instead of an anonymous function.

function readyFn( jQuery ) {
    // Code to run when the document is ready.

$( document ).ready( readyFn );
// or:
$( window ).load( readyFn );

The below example shows $( document ).ready() and $( window ).load() in action. The code tries to load a website URL in an <iframe> and checks for both events:

    <script src=""></script>
    $( document ).ready(function() {
        console.log( "document loaded" );

    $( window ).load(function() {
        console.log( "window loaded" );
    <iframe src=""></iframe>
Jump to Line
Something went wrong with that request. Please try again.