《jQuery Cookbook中文版》——1.2 在DOM加载之后、整个页面加载之前执行jQuery/JavaScript代码

简介: 采用无干扰式JavaScript方法论的现代JavaScript应用程序通常只在DOM完全加载之后才执行JavaScript。实际情况是,任何DOM遍历和操纵都要求在操作之前必须加载DOM。需要一种手段来确定客户端(最常见的是Web浏览器)何时完成DOM的加载(这时图片和SWF文件等资源可能还没有完全加载)。

本节书摘来自异步社区《jQuery Cookbook中文版》一书中的第1章,第1.2节,作者:【美】jQuery社区专家组著,更多章节内容可以访问云栖社区“异步社区”公众号查看

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

1.2.1 问题
采用无干扰式JavaScript方法论的现代JavaScript应用程序通常只在DOM完全加载之后才执行JavaScript。实际情况是,任何DOM遍历和操纵都要求在操作之前必须加载DOM。需要一种手段来确定客户端(最常见的是Web浏览器)何时完成DOM的加载(这时图片和SWF文件等资源可能还没有完全加载)。如果在这种情况下使用window.onload事件,包括所有资源的整个文档完全加载之后才能触发onload事件,这对大部分Web冲浪者来说太费时间。需要一个事件,告诉我们何时可以遍历和操纵DOM。

1.2.2 解决方案
jQuery提供ready()方法,这是一个定制的事件处理程序,通常与DOM的文档对象绑定。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(){//DOM not loaded, must use ready event
    alert(jQuery('p').text());
  });
</script>
</head>
<body>
<p>The DOM is ready!</p>
</body>
</html>

1.2.3 讨论
jQuery用ready()事件处理程序方法来代替JavaScript核心的window.onload事件。可以根据需要多次使用它。使用这个定制事件时,建议将它放在样式表声明和包含文件之后,这样能够确保ready()事件执行任何jQuery或JavaScript代码之前,所有元素属性都已经正确定义。

此外,jQuery函数本身提供使用jQuery定制的ready事件的快捷方式。使用这个快捷方式,下面的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(function(){ //DOM未加载,必须使用就绪事件
    alert(jQuery('p').text());
  });
</script>
</head>
<body>
<p>The DOM is ready!</p>
</body>
</html>

这个定制的jQuery事件只有在JavaScript必须嵌入到页面顶端的文档流并封装在

元素里时才有必要。我只需将所有JavaScript文件包含和内联代码放在结束元素之前,就能避免使用ready()事件,这么做有两个原因。

首先,现代优化技术已经断言,当JavaScript放在页面解析的最后由浏览器加载时,页面的加载就会变得更快。换句话说,如果你将JavaScript放在网页的最后,浏览器将先加载之前的所有内容,然后才加载JavaScript,这是一件好事,因为大部分浏览器通常会暂停其他加载活动,等待JavaScipt引擎编译网页中包含的JavaScipt。从某种程度上说,将JavaScript放在网页文档的开头会形成瓶颈。我知道某些情况下将JavaScript放在

元素中更加简单,但坦诚说,我从未发现绝对必须这么做的情况。我在开发中因为将JavaScript放在页面最后而造成的所有困难都很容易克服,比起得到的优化效果,这些努力也都是值得的。

其次,如果提高网页的速度是我们的目标,为什么要为简单地将代码放到页面最后就能解决的问题而加入更多的功能呢?如果让我在较多代码和较少代码之间做出选择,我选择使用较少的代码。不使用ready()事件减少了代码量,而代码越少,网页运行得总是越快。

基于这些理由,在下面这个例子中,alert()代码没有使用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());//提示DOM已经加载
</script>
</body>
</html>

注意,我已经将所有的JavaScript放在

结束元素之前。HTML文档中的任何其他标记应该都在JavaScript之前。
相关文章
|
9月前
|
JavaScript 前端开发 Go
CSS 与 JS 对 DOM 解析和渲染的影响
【10月更文挑战第16天】CSS 和 JS 会在一定程度上影响 DOM 解析和渲染,了解它们之间的相互作用以及采取适当的优化措施是非常重要的。通过合理的布局和加载策略,可以提高网页的性能和用户体验,确保页面能够快速、流畅地呈现给用户。在实际开发中,要根据具体情况进行权衡和调整,以达到最佳的效果。
255 57
|
8月前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
147 1
|
5月前
|
数据采集 JavaScript Android开发
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
148 7
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
|
4月前
|
JavaScript 前端开发 API
JavaScript中通过array.map()实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等,array.map()的使用详解(附实际应用代码)
array.map()可以用来数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求梳理、提供DOM操作、用来搜索和过滤等,比for好用太多了,主要是写法简单,并且非常直观,并且能提升代码的可读性,也就提升了Long Term代码的可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
5月前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
136 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
6月前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
234 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
6月前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
131 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
4月前
|
JavaScript 前端开发 API
纯js轻量级页面顶部Loading进度条插件
纯js轻量级页面顶部Loading进度条插件
|
8月前
|
JavaScript 前端开发 索引
js中DOM的基础方法
【10月更文挑战第31天】这些DOM基础方法是操作网页文档结构和实现交互效果的重要工具,通过它们可以动态地改变页面的内容、样式和行为,为用户提供丰富的交互体验。
|
8月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
233 5

热门文章

最新文章