JavaScript判断DOM何时加载完毕的技巧


Posted in Javascript onNovember 11, 2012

处理HTML DOM文档存在一个难题是,JavaScript可以在DOM完全加载之前执行,这会给你的代码引发不少的潜在问题。浏览器的渲染和操作顺序大致如下列表:

HTML解析完毕
外部脚本和样式表加载完毕
脚本在文档内解析并执行
HTML DOM完全构造起来
图片和外部内容加载
网页完成加载

在网页头部并且从外部文件加载的脚本会在HTML真正构造之前执行。如前所述,这是个至关重要的问题,因为这两处执行的脚本并不能访问还不存在的DOM。幸好,我们还有若干的补救方法。
目前,最常用的级数是完全等待整个页面加载完毕才执行DOM操作。这种技术只需利用window对象的load事件来绑定一个函数,页面加载完毕即可触发。

addEvent(window, "load", function(){ 
// do something 
});

最简单的操作却是最慢的。在加载过程的顺序列表中,你会注意到页面的加载完毕与否完全被最后一步所掌控。这就是说,如果页面有很多的图片、视频等,用户可能得登上一段时间JavaScript才执行。
另一种级数可用以监听 DOM 加载状态,可能是最复杂的(从实现角度来看),但也是最有效地。
这项技术在不堵塞浏览器加载的情况下尽可能快地检查 HTML DOM文档是否已经加载了执行所必须得属性。以下是检查HTML DOM是否可用的几个要点:

document: 你需要知道DOM文档是否已经加载。若能足够快地检查,运气好的话你会看到undefined。
document.getElementsByTagName和document.getElementById:频繁使用document.getElementsByTagName和document.getElementById函数检查文档,当存在这些函数则表明DOM已经加载完毕。
document.body: 作为额外补充,检查元素是否已经完全加载。理论上前一个检查应该已经能做出判断,但我发现有些情况下还是不够。
使用这些检查就足够判断DOM是否可用了(“足够”在此表示可能会有一定毫秒级的时间差)。这个方法几乎没有瑕疵。单独使用前述检查,脚本应该可以在现代浏览器中运行得相对良好。但是,最近(2008年?)Firefox实现了缓存改进,使得window加载事件实际上可以在脚本能检查到DOM是否可用之前触发。为了能发挥这个优势,我同时为window加载事件附加检查,以期能获得更快的执行速度。

最后,domReady函数集合了所有需要在DOM可用时就执行的函数的引用。一旦DOM被认为是可用的,就调用这些引用并按顺序一一执行。

// 监听 DOM 是否可用的函数 
function domReady(f) { 
// 假如DOM已经加载,马山执行函数 
if(domReady.done) return f(); // 假如我们已经增加了一个函数 
if(domReady.timer) { 
// 把它假如待执行函数清单中 
domReady.ready.push(f); 
} else { 
// 为页面加载完毕绑定一个事件,以防它最先完成。 
addEvent(window, "load", isDOMReady); 
// 初始化执行函数的数组 
domReady.ready = [f]; 
// 尽可能快的检查DOM是否已可用 
domReady.timer = setInterval(isDOMReady, 13); 
} 
} 
// 检查 DOM 是否已可操作 
function isDOMReady() { 
// 如果我们能判断出DOM已可能,忽略 
if(domReady.done) return false; 
// 检查若干函数和元素是否可能 
if(document && document.getElementsByTagName && document.getElementById && document.body) { 
// 如果可用,我们停止检查 
clearInterval(domReady.timer); 
domReady.timer = null; 
// 执行所有正在等待的函数 
for(var i = 0; i < domReady.ready.length; i++) { 
domReady.ready[i](); 
// 记录我们在此已经完成 
domReady.ready = null; 
domReady.done = true; 
} 
} 
}

现在我们来看看在HTML文档中是如何执行的。假设已经将domReady函数写到一个名为domready.js的外部文件中
<html> 
<head> 
<title> Testing DOM Loading</title> 
<script src="domready.js"></script> 
<script> 
domReady(function(){ 
alert("The DOM is loaded!"); 
// do something 
}); 
</script> 
</head> 
<body> 
<h1>Testing DOM Loading</h1> 
<!-- 这里是大量的HTML --> 
</body> 
</html>
Javascript 相关文章推荐
Extjs在exlipse中设置自动提示的方法
Apr 07 Javascript
JS数组合并push与concat区别分析
Dec 17 Javascript
谷歌showModalDialog()方法不兼容出现对话窗口的解决办法
Feb 15 Javascript
javascript中arguments,callee,caller详解
Mar 16 Javascript
AngularJs 弹出模态框(model)
Apr 07 Javascript
javascript简单判断输入内容是否合法的方法
May 11 Javascript
jquery 无限极下拉菜单的简单实例(精简浓缩版)
May 31 Javascript
jquery模拟多级复选框效果的简单实例
Jun 08 Javascript
node.js文件上传处理示例
Oct 27 Javascript
vue2.0父子组件及非父子组件之间的通信方法
Jan 21 Javascript
JS实现520 表白简单代码
May 21 Javascript
ES6知识点整理之数组解构和字符串解构的应用示例
Apr 17 Javascript
JavaScript中的匀速运动和变速(缓冲)运动详细介绍
Nov 11 #Javascript
jQuery语法总结和注意事项小结
Nov 11 #Javascript
javascript继承之为什么要继承
Nov 10 #Javascript
jquery表单验证使用插件formValidator
Nov 10 #Javascript
js 判断checkbox是否选中的操作方法
Nov 09 #Javascript
JS的replace方法详细介绍
Nov 09 #Javascript
获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍
Nov 08 #Javascript
You might like
Symfony生成二维码的方法
2016/02/04 PHP
php实现简单爬虫的开发
2016/03/28 PHP
Yii2基于Ajax自动获取表单数据的方法
2016/08/10 PHP
使用PHPStorm+XDebug搭建单步调试环境
2017/11/19 PHP
PHP合并两个或多个数组的方法
2019/01/20 PHP
Iframe thickbox2.0使用的方法
2009/03/05 Javascript
服务器端的JavaScript脚本 Node.js 使用入门
2012/03/07 Javascript
jQuery使用ajaxSubmit()提交表单示例
2014/04/04 Javascript
jQuery与getJson结合的用法实例
2015/08/07 Javascript
Extjs实现下拉菜单效果
2016/04/01 Javascript
js弹出框、对话框、提示框、弹窗实现方法总结(推荐)
2016/05/31 Javascript
详解Angularjs 如何自定义Img的ng-load 事件
2017/02/15 Javascript
微信小程序页面传值实例分析
2017/04/19 Javascript
javascript实现二叉树的代码
2017/06/08 Javascript
详解微信小程序 登录获取unionid
2017/06/27 Javascript
日期时间范围选择插件:daterangepicker使用总结(必看篇)
2017/09/14 Javascript
零基础之Node.js搭建API服务器的详解
2019/03/08 Javascript
[47:38]Optic vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python合并字典键值并去除重复元素的实例
2016/12/18 Python
Python中的异常处理try/except/finally/raise用法分析
2019/02/28 Python
python如何使用socketserver模块实现并发聊天
2019/12/14 Python
python实现简单颜色识别程序
2020/02/19 Python
Python爬虫进阶之爬取某视频并下载的实现
2020/12/08 Python
东芝官网商城:还原日式美学,打造美好生活
2018/12/27 全球购物
explicit和implicit的含义
2012/11/15 面试题
艺术专业大学生自我评价
2013/09/22 职场文书
法警的竞聘演讲稿
2014/01/02 职场文书
列车长先进事迹材料
2014/01/25 职场文书
《掌声》教学反思
2014/02/23 职场文书
六一儿童节标语
2014/10/08 职场文书
群众路线个人剖析材料及整改措施
2014/11/04 职场文书
2015年迎新晚会策划书
2015/07/16 职场文书
积极心理学课程心得体会
2016/01/22 职场文书
如何利用python和DOS获取wifi密码
2021/03/31 Python
MySQL 使用索引扫描进行排序
2021/06/20 MySQL
面试提问mysql一张表到底能存多少数据
2022/03/13 MySQL