jQuery参考实例 1.2 在DOM加载完毕,页面元素完全加载之前运行jQuery/JavaScript代码
2013-03-19 09:39
706 查看
原文:
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
另外,jQuery函数本身提供了使用ready()方法的快捷方式。以上述代码为例,可以使用快捷方式写成下面的样子:
应该指出,为了在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()事件的例子:
在上述例子中,所有的JavaScript都被移到了紧邻</body>标签之前。
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>标签之前。
相关文章推荐
- javascript之自定义js封装库兼容主流浏览器实现DOM加载之后,页面完全加载之前执行js
- 【web前端开发】浏览器原生API,DOM,Javascript,HTML5,CSS 代码运行实例参考
- 如何在每个页面加载之前运行一段java代码
- jQuery参考实例 1.13 复制DOM元素
- jquery页面加载完之后运行代码
- jQuery参考实例 1.14 获取、设定、删除DOM元素的属性
- 提取jQuery.ready(),页面DOM原生加载完毕执行onDOMReady()
- jQuery 检查某个元素在页面上是否存在实例代码
- jQuery中弹出iframe内嵌页面元素到父页面并全屏化的实例代码
- ADF11g-029:如何在每个页面加载之前运行一段java代码
- jQuery页面加载时触发ready()事件 dom结构加载完成就触发。(参考慕课网)
- jQuery 检查某个元素在页面上是否存在实例代码
- jQuery参考实例 1.3 使用选择器和jQuery函数对DOM元素进行选择
- jQuery参考实例 1.11 移除DOM元素
- jQuery参考实例 1.4 在特定范围中选择DOM元素
- 如何让动态创建的页面元素响应用户事件 (HTML/javascript/jQuery/Ajax/DOM)
- jQuery参考实例 1.10 创建、编辑并插入DOM元素
- jQuery参考实例 1.12 替换DOM元素
- 你真的了解jQuery的ready函数吗?当 DOM(文档对象模型) 已经加载,就执行ready里的代码。DOM何时加载完毕?jQuery对html局部操作,DOM为什么不重新加载?
- jQuery实现页面滚动图片等元素动态加载(按需加载的实例)