《jQuery Cookbook中文版》——1.2　在DOM加载之后、整个页面加载之前执行jQuery/JavaScript代码-阿里云开发者社区

本节书摘来自异步社区《jQuery Cookbook中文版》一书中的第1章，第1.2节，作者：【美】jQuery社区专家组著，更多章节内容可以访问云栖社区“异步社区”公众号查看

1.2　在DOM加载之后、整个页面加载之前执行jQuery/JavaScript代码

1.2.1　问题
采用无干扰式JavaScript方法论的现代JavaScript应用程序通常只在DOM完全加载之后才执行JavaScript。实际情况是，任何DOM遍历和操纵都要求在操作之前必须加载DOM。需要一种手段来确定客户端（最常见的是Web浏览器）何时完成DOM的加载（这时图片和SWF文件等资源可能还没有完全加载）。如果在这种情况下使用window.onload事件，包括所有资源的整个文档完全加载之后才能触发onload事件，这对大部分Web冲浪者来说太费时间。需要一个事件，告诉我们何时可以遍历和操纵DOM。

1.2.2　解决方案
jQuery提供ready()方法，这是一个定制的事件处理程序，通常与DOM的文档对象绑定。ready()方法的参数是一个函数，后者包含在DOM可以遍历和操纵时执行的JavaScript代码。下面是一个简单的例子，在DOM就绪而页面还未完全加载时打开一个alert()窗口：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/JavaScript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/JavaScript">
　　jQuery(document).ready(function(){//DOM not loaded, must use ready event
　　　　alert(jQuery('p').text());
　　});
</script>
</head>
<body>
<p>The DOM is ready!</p>
</body>
</html>

1.2.3　讨论
jQuery用ready()事件处理程序方法来代替JavaScript核心的window.onload事件。可以根据需要多次使用它。使用这个定制事件时，建议将它放在样式表声明和包含文件之后，这样能够确保ready()事件执行任何jQuery或JavaScript代码之前，所有元素属性都已经正确定义。

此外，jQuery函数本身提供使用jQuery定制的ready事件的快捷方式。使用这个快捷方式，下面的alert()示例可以改写为：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/JavaScript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/JavaScript">
　　jQuery(function(){ //DOM未加载,必须使用就绪事件
　　　　alert(jQuery('p').text());
　　});
</script>
</head>
<body>
<p>The DOM is ready!</p>
</body>
</html>

这个定制的jQuery事件只有在JavaScript必须嵌入到页面顶端的文档流并封装在

元素里时才有必要。我只需将所有JavaScript文件包含和内联代码放在结束元素之前，就能避免使用ready()事件，这么做有两个原因。

首先，现代优化技术已经断言，当JavaScript放在页面解析的最后由浏览器加载时，页面的加载就会变得更快。换句话说，如果你将JavaScript放在网页的最后，浏览器将先加载之前的所有内容，然后才加载JavaScript，这是一件好事，因为大部分浏览器通常会暂停其他加载活动，等待JavaScipt引擎编译网页中包含的JavaScipt。从某种程度上说，将JavaScript放在网页文档的开头会形成瓶颈。我知道某些情况下将JavaScript放在

元素中更加简单，但坦诚说，我从未发现绝对必须这么做的情况。我在开发中因为将JavaScript放在页面最后而造成的所有困难都很容易克服，比起得到的优化效果，这些努力也都是值得的。

其次，如果提高网页的速度是我们的目标，为什么要为简单地将代码放到页面最后就能解决的问题而加入更多的功能呢？如果让我在较多代码和较少代码之间做出选择，我选择使用较少的代码。不使用ready()事件减少了代码量，而代码越少，网页运行得总是越快。

基于这些理由，在下面这个例子中，alert()代码没有使用ready()事件：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<p>The DOM is ready!</p>
<script type="text/JavaScript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/JavaScript">
　　　alert(jQuery('p').text());//提示DOM已经加载
</script>
</body>
</html>

注意，我已经将所有的JavaScript放在

结束元素之前。HTML文档中的任何其他标记应该都在JavaScript之前。

《jQuery Cookbook中文版》——1.2 在DOM加载之后、整个页面加载之前执行jQuery/JavaScript代码-阿里云开发者社区

《jQuery Cookbook中文版》——1.2 在DOM加载之后、整个页面加载之前执行jQuery/JavaScript代码

1.2 在DOM加载之后、整个页面加载之前执行jQuery/JavaScript代码

《jQuery Cookbook中文版》——1.2　在DOM加载之后、整个页面加载之前执行jQuery/JavaScript代码-阿里云开发者社区

《jQuery Cookbook中文版》——1.2　在DOM加载之后、整个页面加载之前执行jQuery/JavaScript代码

1.2　在DOM加载之后、整个页面加载之前执行jQuery/JavaScript代码