$( 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.


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/

时间： 2024-08-28 15:47:39