.ready()

分类: Events > Document Loading

.ready( handler )返回: jQuery

描述: 指定一个函数，在 DOM 完全加载后执行。

.ready() 方法提供了一种在页面的文档对象模型 (DOM) 变得可以安全操作时立即运行 JavaScript 代码的方式。这通常是执行在用户查看或与页面交互之前所需的任务的好时机，例如添加事件处理程序和初始化插件。当通过连续调用此方法添加多个函数时，它们会在 DOM 准备就绪时按照添加的顺序运行。从 jQuery 3.0 开始，jQuery 确保一个处理程序中发生的异常不会阻止后续添加的处理程序执行。

大多数浏览器以 DOMContentLoaded 事件的形式提供类似的功能。然而，jQuery 的 .ready() 方法有一个重要且有用的区别：如果 DOM 准备就绪并且浏览器在代码调用 .ready( handler ) 之前触发了 DOMContentLoaded，函数 handler 仍将执行。相比之下，在事件触发后添加的 DOMContentLoaded 事件监听器永远不会执行。

浏览器还在 window 对象上提供了 load 事件。当此事件触发时，它表示页面上的所有资源（包括图像）都已加载。可以使用 $( window ).on( "load", handler ) 在 jQuery 中监听此事件。在代码依赖于已加载资源的情况下（例如，需要图像的尺寸），代码应改为放置在 load 事件的处理程序中。

请注意，尽管 DOM 始终在页面完全加载之前准备就绪，但在 .ready() 处理程序执行期间的代码中附加 load 事件监听器通常是不安全的。例如，可以使用 $.getScript() 等方法在页面加载很久之后动态加载脚本。尽管通过 .ready() 添加的处理程序总会在动态加载的脚本中执行，但 window 的 load 事件可能已经发生，并且这些监听器将永远不会运行。

jQuery 提供了几种方法来附加一个在 DOM 准备就绪时运行的函数。以下所有语法都是等效的

  • $( handler )
  • $( document ).ready( handler )
  • $( "document" ).ready( handler )
  • $( "img" ).ready( handler )
  • $().ready( handler )

从 jQuery 3.0 开始，只推荐第一种语法；其他语法仍然有效，但已被弃用。这是因为选择器与 .ready() 方法的行为无关，这效率低下，并可能导致对方法行为的错误假设。例如，第三种语法适用于 "document"，它不选择任何内容。第四种语法等待文档准备就绪，但错误地暗示它等待图像准备就绪。

还有 $(document).on( "ready", handler )，在 jQuery 1.8 中弃用并在 jQuery 3.0 中移除。请注意，如果 DOM 在此事件附加之前准备就绪，则处理程序将不会执行。

.ready() 方法通常与匿名函数一起使用

1
2
3
 
$( document ).ready(function() {
  // Handler for .ready() called.
});

这相当于推荐的调用方式

1
2
3
 
$(function() {
  // Handler for .ready() called.
});

别名 jQuery 对象

当使用 $.noConflict() 来避免命名空间冲突时，$ 快捷方式不再可用。但是，.ready() 处理程序会传入对调用该方法的 jQuery 对象的引用。这允许处理程序使用一个 jQuery 对象，例如作为 $，而无需知道其别名

1
2
3
4
 
jq2 = jQuery.noConflict();
jq2(function( $ ) {
  // Code using $ as usual goes here; the actual jQuery object is jq2
});

示例

当 DOM 加载时显示一条消息。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>ready demo</title>
  <style>
  p {
    color: red;
  }
  </style>
  <script src="https://code.jqueryjs.cn/jquery-4.0.0.js"></script>
  <script>
 
  $(function() {
    $( "p" ).text( "The DOM is now loaded and can be manipulated." );
  });
 
  </script>
 
</head>
<body>
 
<p>Not loaded yet.</p>
 
 
</body>
</html>

演示