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.
|
1
2
3
4
|
// A $( document ).ready() block.$( document ).ready(function() { console.log( "ready!" );}); |
Experienced developers sometimes use the 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.
|
1
2
3
4
|
// Shorthand for $( document ).ready()$(function() { console.log( "ready!" );}); |
You can also pass a named function to $( document ).ready() instead of passing an anonymous function.
|
1
2
3
4
5
6
7
8
9
|
// 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 example below shows $( document ).ready() and $( window ).load() in action. The code tries to load a website URL in an <iframe> and checks for both events:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<html><head> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script> $( document ).ready(function() { console.log( "document loaded" ); }); $( window ).load(function() { console.log( "window loaded" ); }); </script></head><body> <iframe src="http://techcrunch.com"></iframe></body></html> |
from: http://learn.jquery.com/using-jquery-core/document-ready/