jQuery参照实例 1.2 在DOM加载完毕，页面元素完全加载之前运行jQuery/JavaScript代码 _JavaScript

jQuery参考实例 1.2 在DOM加载完毕，页面元素完全加载之前运行jQuery/JavaScript代码

原文：

http://www.lifelaf.com/blog/?p=187

本文翻译自jQuery Cookbook (O’Reilly 2009) 1.2 Executing jQuery/JavaScript Code After the DOM Has Loaded but Before Complete Page Load

需求

主流的JavaScript应用程序一般只在DOM完全加载后才运行JS代码。事实情况是：任何对于DOM对象的遍历或其它操作都必须在DOM加载完成后才能进行。因此，应用程序需要知道什么时候浏览器完全加载了DOM。如果我们使用window.onload事件，那么就必须等待全部页面元素的加载 ― 包括所有的图片、swf文件等，而这样的等待时间显然太长了。应用程序需要一个事件，当且仅当DOM本身被加载完成时，该事件被触发。

解决方案

jQuery提供一个叫做ready()的方法 ― 一个一般绑定在document对象上的事件处理器。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(){
          alert(jQuery('p').text());
      });
  </script>
</head>
<body>
<p>The DOM is ready!</p>
</body>
</html>

讨论

ready()事件处理器是JavaScript的window.onload在jQuery中的替代品，可以被多次使用。在使用该事件时，一般而言，在CSS声明语句之后再包含ready()语句的调用会比较好。这么做的原因在于：在CSS声明之后，所有元素的属性都已被正确定义了，而这可以保证event()方法中jQuery/JavaScript代码的正确执行。

另外，jQuery函数本身提供了使用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" />
  <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(){
          alert(jQuery('p').text());
      });
  </script>
</head>
<body>
<p>The DOM is ready!</p>
</body>
</html>

应该指出，为了在DOM加载完毕之后立即运行jQuery/JavaScript代码，ready()方法并不是唯一的解决方案 ― 只有当需要运行的jQuery/JavaScript代码必须嵌入在页面头部（包含在<head>标签中）时，ready()方法的使用才是必要的。通过将jQuery/JavaScript代码放在紧邻</body>标签之前，可以简单的避免ready()方法的使用。这么做有两个原因：

首先，目前的优化技术表明，如果浏览器在页面解析过程的最后才加载JavaScript，页面的加载速度会更快。换而言之，如果将JavaScript代码放在web页面的底部，那么浏览器将先加载别的内容，而最后才加载JavaScript。由于大多数浏览器在遇到JavaScript时都会暂停加载，直到JavaScript引擎完成对JS代码的编译，因此，把JavaScript代码放在页面的顶部无异于对页面的加载形成了一个瓶颈，而将JS代码移到页面底部则会显著改善状况。有时候，把JavaScript代码放在head标签中会比较简单，但是我从来没有碰到过JavaScript必须放在head标签中的情况。有时，将JavaScript放在页面底部的操作会碰到一些问题，但是这些问题都能够很容易的得到解决。

其次，如果我们的目标是提升网页访问的速度，那么当简单的移动代码位置就能解决问题的时候，为什么要去编写更多的代码，增加代码的复杂性呢？当我们遇到两个解决方案：1.代码量更多的方案，2.代码量更少的方案，我想我会选择代码量更少的方案，尤其当这个方案的运行速度更快的时候。

下面是一个不使用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());//go for it the DOM is loaded
</script>
</body>
</html>

在上述例子中，所有的JavaScript都被移到了紧邻</body>标签之前。