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 CHECKBOX全选,取消全选,反选方法三
Aug 30 Javascript
javascript delete 使用示例代码
Mar 29 Javascript
jQuery选择没有colspan属性的td的代码
Jul 06 Javascript
javascript一些实用技巧小结
Mar 18 Javascript
javascript self对象使用详解
Oct 18 Javascript
JavaScript数据结构链表知识详解
Nov 21 Javascript
使用JS 插件qrcode.js生成二维码功能
Feb 20 Javascript
Vue组件全局注册实现警告框的实例详解
Jun 11 Javascript
实例分析vue循环列表动态数据的处理方法
Sep 28 Javascript
vue router 组件的高级应用实例代码
Apr 08 Javascript
Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装
Oct 21 Javascript
JS高级程序设计之class继承重点详解
Jul 07 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
smarty的保留变量问题
2008/10/23 PHP
php中实现精确设置session过期时间的方法
2014/07/17 PHP
基于php实现七牛抓取远程图片
2015/12/01 PHP
PHP中的Trait 特性及作用
2016/04/03 PHP
PHP面向对象之事务脚本模式(详解)
2017/06/07 PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
2019/12/01 PHP
在线游戏大家来找茬II
2006/09/30 Javascript
javascript new 需不需要继续使用
2009/07/02 Javascript
JQuery的read函数与js的onload不同方式实现
2013/03/18 Javascript
通过javascript获取iframe里的值示例代码
2013/06/24 Javascript
JQuery Mobile实现导航栏和页脚
2016/03/09 Javascript
详解微信小程序开发之下拉刷新 上拉加载
2016/11/24 Javascript
详解vue slot插槽的使用方法
2017/06/13 Javascript
Vue学习笔记进阶篇之vue-cli安装及介绍
2017/07/18 Javascript
input type=file 选择图片并且实现预览效果的实例
2017/10/26 Javascript
浅谈Vue路由快照实现思路及其问题
2018/06/07 Javascript
解决layui弹框失效的问题
2019/09/09 Javascript
JS实现灯泡开关特效
2020/03/30 Javascript
JS字符串补全方法padStart()和padEnd()
2020/05/27 Javascript
vue2和vue3的v-if与v-for优先级对比学习
2020/10/10 Javascript
vue动态合并单元格并添加小计合计功能示例
2020/11/26 Vue.js
使用python实现接口的方法
2017/07/07 Python
Python之多线程爬虫抓取网页图片的示例代码
2018/01/10 Python
python列表插入append(), extend(), insert()用法详解
2019/09/14 Python
python scipy卷积运算的实现方法
2019/09/16 Python
python关闭占用端口方式
2019/12/17 Python
python tkinter 设置窗口大小不可缩放实例
2020/03/04 Python
pycharm永久激活超详细教程
2020/10/29 Python
CSS3 background-image颜色渐变的实现代码
2018/09/13 HTML / CSS
戴尔美国官网:Dell
2016/08/31 全球购物
伦敦剧院门票:London Theatre Direct
2018/11/21 全球购物
一般党员对照检查材料
2014/09/24 职场文书
机关单位保密工作责任书
2015/05/11 职场文书
2015年工商局个人工作总结
2015/07/23 职场文书
Django显示可视化图表的实践
2021/05/10 Python
详解PHP服务器如何在有限的资源里最大提升并发能力
2021/05/25 PHP