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 ).on( "load", function() { ... })
will run once the entire page (images or iframes), not just the DOM, is ready.
1
2
3
4
|
|
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
|
|
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
|
|
The example below shows $( document ).ready()
and $( window ).on( "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
|
|
To learn more about .ready()
method, you can read the relevant documenation page.