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数组深拷贝和浅拷贝的两种方法
Apr 16 Javascript
基于javascript的JSON格式页面展示美化方法
Jul 02 Javascript
jQuery中andSelf()方法用法实例
Jan 08 Javascript
JavaScript模拟重力状态下抛物运动的方法
Mar 03 Javascript
JQuery ztree 异步加载实例讲解
Feb 25 Javascript
JS实现刷新父页面不弹出提示框的方法
Jun 22 Javascript
总结js中的一些兼容性易错的问题
Dec 18 Javascript
使用electron实现百度网盘悬浮窗口功能的示例代码
Oct 24 Javascript
JS拖拽排序插件Sortable.js用法实例分析
Feb 20 Javascript
vue登录注册实例详解
Sep 14 Javascript
Vue 的 v-model用法实例
Nov 23 Vue.js
浅谈JavaScript作用域
Dec 06 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
example2.php
2006/10/09 PHP
解析php做推送服务端实现ios消息推送
2013/07/01 PHP
php + nginx项目中的权限详解
2017/05/23 PHP
日期函数扩展类Ver0.1.1
2006/09/07 Javascript
JQuery 学习笔记 选择器之四
2009/07/23 Javascript
jquery学习笔记 用jquery实现无刷新登录
2011/08/08 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
2013/10/24 Javascript
jQuery实现连续动画效果实例分析
2015/10/09 Javascript
JavaScript实现时间倒计时跳转(推荐)
2016/06/28 Javascript
超详细的JS弹出窗口代码大全
2020/04/18 Javascript
详解Node.js中的事件机制
2016/09/22 Javascript
支持移动端原生js轮播图
2017/02/16 Javascript
Bootstrap 表单验证formValidation 实现表单动态验证功能
2017/05/17 Javascript
详解AngularJS之$window窗口对象
2018/01/17 Javascript
详解在React.js中使用PureComponent的重要性和使用方式
2018/07/10 Javascript
vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】
2018/11/08 Javascript
微信小程序与webview交互实现支付功能
2019/06/07 Javascript
JS实现分页导航效果
2020/02/19 Javascript
[52:03]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第三场 1月31日
2021/03/11 DOTA
Python 正则表达式操作指南
2009/05/04 Python
python创建和使用字典实例详解
2013/11/01 Python
python获取外网ip地址的方法总结
2015/07/02 Python
python基于BeautifulSoup实现抓取网页指定内容的方法
2015/07/09 Python
Python爬虫中urllib库的进阶学习
2018/01/05 Python
Django框架视图介绍与使用详解
2019/07/18 Python
Python使用matplotlib实现交换式图形显示功能示例
2019/09/06 Python
Python tcp传输代码实例解析
2020/03/18 Python
python右对齐的实例方法
2020/07/05 Python
法国时尚童装网站:Melijoe
2016/08/10 全球购物
香港草莓网:Strawberrynet香港
2019/05/10 全球购物
struct与class的区别
2014/02/03 面试题
什么是Linux虚拟文件系统VFS
2015/08/25 面试题
cf搞笑广告词
2014/03/14 职场文书
财产分割协议书范本
2014/11/03 职场文书
国情备忘录观后感
2015/06/04 职场文书
React四级菜单的实现
2022/04/08 Javascript