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 相关文章推荐
JQuery 学习笔记 选择器之四
Jul 23 Javascript
深入理解JavaScript系列(10) JavaScript核心(晋级高手必读篇)
Jan 15 Javascript
JavaScript判断浏览器类型的方法
Feb 10 Javascript
JavaScript计时器用法分析【setTimeout和clearTimeout】
Jan 18 Javascript
基于滚动条位置判断的简单实例
Dec 14 Javascript
关于axios如何全局注册浅析
Jan 14 Javascript
vue实现点击展开点击收起效果
Apr 27 Javascript
JavaScript插入排序算法原理与实现方法示例
Aug 06 Javascript
Vue CLI3 如何支持less的方法示例
Aug 29 Javascript
vue通过滚动行为实现从列表到详情,返回列表原位置的方法
Aug 31 Javascript
js使用formData实现批量上传
Mar 27 Javascript
vue spa应用中的路由缓存问题与解决方案
May 31 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
使用PHP的日期与时间函数技巧
2008/04/24 PHP
php文本转图片自动换行的方法
2013/03/13 PHP
php删除左端与右端空格的方法
2014/11/29 PHP
PHP 中 Orientation 属性判断上传图片是否需要旋转
2015/10/16 PHP
php判断当前操作系统类型
2015/10/28 PHP
js判断IE6/IE7/FF的代码[XMLHttpRequest]
2011/02/16 Javascript
jquery聚焦文本框与扩展文本框聚焦方法
2012/10/12 Javascript
js触发asp.net的Button的Onclick事件应用
2013/02/02 Javascript
javascript 获取网页标题代码实例
2014/01/22 Javascript
JavaScript获取网页支持表单字符集的方法
2015/04/02 Javascript
js实现touch移动触屏滑动事件
2015/04/17 Javascript
JavaScript中constructor()方法的使用简介
2015/06/05 Javascript
JS去除重复并统计数量的实现方法
2016/12/15 Javascript
微信小程序图片自适应支持多图实例详解
2017/06/21 Javascript
利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解
2017/11/20 Javascript
使用express来代理服务的方法
2019/06/21 Javascript
JavaScript中如何对多维数组(矩阵)去重的实现
2019/12/04 Javascript
[40:05]DOTA2上海特级锦标赛A组小组赛#1 EHOME VS MVP.Phx第一局
2016/02/25 DOTA
Python中字典(dict)和列表(list)的排序方法实例
2014/06/16 Python
列举Python中吸引人的一些特性
2015/04/09 Python
Python使用Supervisor来管理进程的方法
2015/05/28 Python
python爬虫的工作原理
2017/03/05 Python
Python中Django 后台自定义表单控件
2017/03/28 Python
Django CBV类的用法详解
2019/07/26 Python
在VS2017中用C#调用python脚本的实现
2019/07/31 Python
Python threading的使用方法解析
2019/08/28 Python
简单了解Pandas缺失值处理方法
2019/11/16 Python
Pytorch训练过程出现nan的解决方式
2020/01/02 Python
django美化后台django-suit的安装配置操作
2020/07/12 Python
美国标志性加大尺码时装品牌:Ashley Stewart
2016/12/15 全球购物
Java程序员常见面试题
2015/07/16 面试题
党员干部观看《周恩来四个昼夜》思想汇报
2014/09/10 职场文书
户籍证明模板
2014/09/28 职场文书
工作期间打牌检讨书范文
2014/11/20 职场文书
学生逃课万能检讨书2000字
2015/02/17 职场文书
单位工作证明范本
2015/06/15 职场文书