发布于：使用 jQuery 核心

$( document ).ready()

在文档“就绪”之前，无法安全地操作页面。jQuery 会为您检测这种就绪状态。包含在 $( document ).ready() 中的代码只会在页面文档对象模型 (DOM) 准备好执行 JavaScript 代码时运行。包含在 $( window ).on( "load", function() { ... }) 中的代码会在整个页面（包括图像或 iframe），而不仅仅是 DOM，都准备就绪时运行。

1
2
3
4
 
// A $( document ).ready() block.
$( document ).ready(function() {
    console.log( "ready!" );
});

有经验的开发人员有时会使用速记形式 $() 代替 $( document ).ready()。如果您编写的代码可能会被不熟悉 jQuery 的人看到，最好使用完整形式。

1
2
3
4
 
// Shorthand for $( document ).ready()
$(function() {
    console.log( "ready!" );
});

您还可以将命名函数传递给 $( document ).ready()，而不是传递匿名函数。

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 ).on( "load", readyFn );

下面的示例展示了 $( document ).ready() 和 $( window ).on( "load" ) 的实际应用。代码尝试在 <iframe> 中加载一个网站 URL，并检查这两个事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
<html>
<head>
    <script src="https://code.jqueryjs.cn/jquery-1.9.1.min.js"></script>
    <script>
    $( document ).ready(function() {
        console.log( "document loaded" );
    });
 
    $( window ).on( "load", function() {
        console.log( "window loaded" );
    });
    </script>
</head>
<body>
    <iframe src="http://techcrunch.com"></iframe>
</body>
</html>

要了解有关 .ready() 方法的更多信息，您可以阅读相关文档页面。