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

本文翻译自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声明之后,所有元素的属性都已被正确定义了,而这可以保证ready()方法中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>标签之前。

Chuan Shao

Read more posts by this author.

Shanghai

Subscribe to Chuan's blog

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!