`
adamed
  • 浏览: 181390 次
社区版块
存档分类
最新评论

JQuery CookBook翻译连载2

jQueryJavaScriptAjaxHTML互联网 
阅读更多

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

问题

目前JavaScript应用均采用不唐突的设计方法，典型的例子是：仅仅在DOM加载完成后就开始Javascript代码。这样做的原因是因为，我们只能在DOM全部加载完成后，才能执行DOM节点遍历、DOM节点维护等操作。为了做到这一点我们就需要找到一种方法来确定客户端（通常情况下就是浏览器）何时将DOM加载完毕（这里的加载完毕仅仅指DOM对象加载完毕，而Web页面的其他对象比如：图片、SWF文件可能尚未加载完成。）如果我们通过window.onload事件来解决这个问题的话就会遇到一个问题：onload事件是在页面全部资源（包括图片、SWF文件等）完全加载结束之后才会被触发。对于大多数互联网冲浪人员来说这种方式需要的时间过长。我们需要的是这样一个事件：它能够在所有的DOM对象加载完毕后立刻触发（而不管其他页面资源是否加载完毕）。

解决方案

jQuery提供ready()方法来解决这个问题，ready方法通常被DOM中的document对象调用。

ready方法具有一个function类型的参数，该参数中的方法会在页面中DOM节点可以被遍历或修改时被立即执行。下面给出了一个简单的例子，该例子中的alert方法会在页面中DOM加载结束但整个页面未加载完成时被调用：

 
Code:

<!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 尚未加载, 必须使用 ready 事件
alert(jQuery('p').text());
});
</script>
</head>
<body>
<p>The DOM is ready!</p>
</body>
</html>
 



讨论

ready()事件处理方法是jQuery为我们提供的JavaScript核心window.onload事件的替代方法。该方法你可以多次使用。在使用此方法时最好将其放在Web页面中的样式定义及引用之后，这样做的目的是保证在执行ready()事件中的jQuery或JavaScript代码时，所有的元素(element)属性都已经被正确的定义了。

另外jQuery提供了ready事件的缩写方式，下面的代码使用缩写方式重写上面的例子：

 
Code:

<!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 not loaded, must use ready event
alert(jQuery('p').text());
});
</script>
</head>
<body>
<p>The DOM is ready!</p>
</body>
</html>
 



在使用ready方法时我们应尽量将其放在<head>标签内，避免将该方法放在<body>标签中。这样做有2点理由：

首先，现代最佳实践已经证明，当JS代码放在页面结束位置时页面加载是最快的。

换句话说，当你将JavaScript代码放在web页面底部时，浏览器会在加载完整个页面后加载JavaScript代码。这是一件好事，因为大多数浏览器在JavaScript引擎将整个页面中的JS代码编译完成前会停止一切其他的加载操作。所以，当你将JavaScript代码写在web页面顶部的时候感觉上会产成一些瓶颈。我意识到，在早期的时候由于一些特殊的原因，将JavaScript代码写到<head>标签中更加简单一些。但是老实说，我从未发现任何一种情况是你非这样做不可的。在我开发过程中，将JavaScript代码写在页面底部遇到的任何问题都可以被轻易的解决并且值得这样优化。

其次，如果加快页面速度时我们的终极目标，而仅仅将代码移到页面底部就可以进一步实现的话，为什么我们还要对实现同样功能而进行更多的封装呢？在更多代码和更少代码之间选择的话，我选择更少的代码。可以使用下面的方式代替使用ready()方法，并且这种方式执行速度比用ready()方法更快。
Code:

<!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>标签结束之前。任何使用到的额外的标识都需要移到JavaScript之前。

分享到：
| JQuery CookBook翻译连载3
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics