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 相关文章推荐
javascript 多浏览器 事件大全
Mar 23 Javascript
多种方法判断Javascript对象是否存在
Sep 22 Javascript
javascript陷阱 一不小心你就中招了(字符运算)
Nov 10 Javascript
javascript确认框的三种使用方法
Dec 17 Javascript
Node.js 使用递归实现遍历文件夹中所有文件
Sep 18 Javascript
完美解决axios在ie下的兼容性问题
Mar 05 Javascript
Vue实现左右菜单联动实现代码
Aug 12 Javascript
JavaScript实现JSON合并操作示例【递归深度合并】
Sep 07 Javascript
微信小程序页面渲染实现方法
Nov 06 Javascript
vue-router结合vuex实现用户权限控制功能
Nov 14 Javascript
JavaScript如何操作css
Oct 24 Javascript
vue+swiper实现左右滑动的测试题功能
Oct 30 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中养成7个面向对象的好习惯
2010/07/17 PHP
php调用KyotoTycoon简单实例
2015/04/02 PHP
php实现在多维数组中查找特定value的方法
2015/07/29 PHP
PHP中“=&gt;
2019/03/01 PHP
jquery实现智能感知连接外网搜索
2013/05/21 Javascript
JavaScript获取FCK编辑器信息的具体方法
2013/07/12 Javascript
取消选中单选框radio的三种方式示例介绍
2013/12/23 Javascript
禁用JavaScript控制台调试的方法
2014/03/07 Javascript
js自调用匿名函数的三种写法(推荐)
2016/08/19 Javascript
浅谈JavaScript的计时器对象
2016/12/26 Javascript
bootstrap css样式之表单
2017/01/19 Javascript
mui上拉加载更多下拉刷新数据的封装过程
2017/11/03 Javascript
解决Jstree 选中父节点时被禁用的子节点也会选中的问题
2017/12/27 Javascript
在Vue中使用highCharts绘制3d饼图的方法
2018/02/08 Javascript
Vue组件中prop属性使用说明实例代码详解
2018/05/31 Javascript
vue+vue-router转场动画的实例代码
2018/09/01 Javascript
vue多次循环操作示例
2019/02/08 Javascript
JavaScript实现动态生成表格
2020/08/02 Javascript
[01:10]DOTA2亚洲邀请赛 征战号角响彻全场
2015/01/06 DOTA
[47:18]完美世界DOTA2联赛循环赛 IO vs FTD BO2第一场 11.05
2020/11/06 DOTA
python对list中的每个元素进行某种操作的方法
2018/06/29 Python
使用python3构建文件传输的方法
2019/02/13 Python
python连接PostgreSQL过程解析
2020/02/09 Python
使用python 计算百分位数实现数据分箱代码
2020/03/03 Python
CSS+jQuery+PHP+MySQL实现的在线答题功能
2015/04/25 HTML / CSS
浅谈html5与APP混合开发遇到的问题总结
2018/03/20 HTML / CSS
澳大利亚排名第一的狂热牛仔品牌:ONETEASPOON
2018/11/20 全球购物
英国露营设备和户外服装购物网站:Simply Hike
2019/05/05 全球购物
如何将字串String转换成整数int
2015/02/21 面试题
不开辟用于交换数据的临时空间,如何完成字符串的逆序
2012/12/02 面试题
师范生自荐信范文
2013/10/06 职场文书
小学中等生评语
2014/12/29 职场文书
西部计划志愿者工作总结
2015/08/11 职场文书
2016年学校招生广告语
2016/01/28 职场文书
JavaScript函数柯里化
2021/11/07 Javascript
MySQL派生表联表查询实战过程
2022/03/20 MySQL