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

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

日期：2014-05-16　浏览次数：20395 次

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

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

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

需求

解决方案

讨论

相关资料更多>

推荐阅读更多>