DOM就绪，还是文档载入？

2007年11月11日原创

继基于Mozilla的浏览器之后，Opera9也支持了DOMContentLoaded事件。DOMContentLoaded事件与window对象的load事件是相对的。也就是说，对于开发跨浏览器的Web应用而言，初始化页面的前提大都是DOM文档就绪，而非整个页面载入完成。因为后者涉及到载入页面中包含的图像及其他二进制内容完成后才能触发页面载入事件（即onload），所以这就要求我们（应该是W3C或者浏览器厂商）必须拿出一个方案，来检测DOM载入完成，而不是等待页面载入完成。

目前浏览器在DOM载入事件（而非onload事件）这个问题上已经划分成了IE、基于Mozilla的浏览器和Opera、Safari三大阵营，它们各自都有自己的解决方案（没有标准化的又一恶果！！），即为编写跨浏览器的脚本，我们必须拿出三套应对这三大阵营各自专有方法的方案来。幸运的是，外国同行已经先我们一步搞出了一些名堂，比如Dean Edwards整合了Matthias Miller、John Resig之后的方案–有意思的是，这个方案的示例页面中使用了美国国家宇航局（NASA）网站上的巨幅太空照片来说明问题：

// Dean Edwards/Matthias Miller/John Resig
function init() {
    // 如果本函数已经被调用过了则退出
    if (arguments.callee.done) return;
    // 为本函数添加标记以便不会被调用两次
    arguments.callee.done = true;
    // 终止计时
    if (_timer) clearInterval(_timer);
    // 其他代码
};
/* 针对基于Mozilla的浏览器及Opera9 */
if (document.addEventListener) {
    document.addEventListener(”DOMContentLoaded”, init, false);
}
/* 针对Internet Explorer */
/*@cc_on @*/
/*@if (@_win32)
document.write(”
    src=javascript:void(0)><\/script>”);
var script = document.getElementById(”__ie_onload”);
script.onreadystatechange = function() {
    if (this.readyState == “complete”) {
        init(); // 调用onload事件处理程序
    }
};
/*@end @*/
/* 针对Safari */
if (/WebKit/i.test(navigator.userAgent)) { // 嗅探
    var _timer = setInterval(function() {
    if (/loaded|complete/.test(document.readyState)) {
        init(); // 调用onload事件处理程序
    }
    }, 10);
}
/* 针对其他浏览器 */
window.onload = init;

以上代码应该包含在一个外部js文件中，通过在文档头部中使用<script>标签引入页面。而在我翻译的《Advanced DOM Scripting》一书中，也使用了这个方案定义了addLoadEvent()方法（只是稍有改进）。

参考链接如下（其实是前后相继的三篇不断补充的文章）：
http://dean.edwards.name/weblog/2005/02/order-of-events/
http://dean.edwards.name/weblog/2005/09/busted/
http://dean.edwards.name/weblog/2006/06/again/
也可以看看这个：
http://tanny.ica.com/ica/tko/tkoblog.nsf/dx/domcontentloaded-event-for-browsers

使用了DOM载入事件的示例页面如下
http://dean.edwards.name/my/busted3.html

其中，显示在红色背景上的”Page loaded!”字样，说明DOM已经载入完成，脚本已经可以开始对DOM大显身手了！而下面那幅图像（取决于网络连接速度）则会犹抱琵琶半遮面，一点点地显露出它的庐山真面目。只有图像显示（载入）完成，才会触发window.onload事件。所以，Dean 用NASA的巨幅照片的良苦用心也就不言自明了。

还有《Advanced DOM Scripting》的作者Jeff提供的一个类似的示例页面如下（可要有点耐心哟）：
http://advanceddomscripting.com/source/chapter4/load/load.html

有话要说？评论RSS

朋友们的留言

burberry outlet | 06月 30th, 2011 at 16:09
为什么不统一下呢。。每次都要写不同浏览器的支持..好麻烦…写的头都大的…希望将来各个浏览器DOM都统一这样也不用那么辛苦..嘿嘿
Reply to this comment
Singamajigs | 09月 15th, 2011 at 23:52
Check out this good read
Reply to this comment
Brooks Vantassel | 09月 16th, 2011 at 00:14
Hey, Wonderful job! This is very much helpful for my research and i hope to run through more of your posts someday! How i wish i can see you in person so i can get to know you more.
Reply to this comment
Marge Etienne | 09月 16th, 2011 at 02:12
I have noticed that over the course of developing a relationship with real estate owners, you’ll be able to come to understand that, in every real estate financial transaction, a commission amount is paid. Eventually, FSBO sellers tend not to “save” the payment. Rather, they fight to win the commission by doing a great agent’s work. In the process, they spend their money and time to perform, as best they’re able to, the jobs of an broker. Those assignments include exposing the home via marketing, introducing the home to buyers, making a sense of buyer desperation in order to induce an offer, making arrangement for home inspections, managing qualification assessments with the bank, supervising fixes, and assisting the closing of the deal.
Reply to this comment
Nita Parinas | 09月 16th, 2011 at 02:34
Random Google results can occasionally lead to wonderful blogs like this. You are doing a good job, and we share lots of opinions.
Reply to this comment
UGG Sheepskin Boots Australia | 09月 19th, 2011 at 09:23
I believe this really is excellent information. Most of men and women will concur with you and I ought to thank you about it
Reply to this comment
New Era Hats | 11月 16th, 2011 at 09:52
You happen to be thus nice! When i dont think There are understand whatever like that before. For that reason awesome to seek out anyone with some genuine ideas on it issue. realy i appreciate you for establishing that together. this web site is one thing that is required via the internet, somebody through a little special. effective responsibility of driving something new to the web!
Reply to this comment
Baseball Hats | 11月 16th, 2011 at 09:53
You are which means that nice! That i don’t assume There are learn anything such as this previously. For that reason fine to locate an individual some classic ideas on this approach subject. realy we appreciate you establishing the away. this web site can be something that’s needed online, a professional with to some degree originality. effective part of bringing new things to the web!
Reply to this comment
sunglasses hut store | 11月 16th, 2011 at 09:55
http://www.sunglasseshut.us/ the city is not grass Orioles legend, it always live in the real inside, fast drums, haste figure, numbness of the eyes, fake smile, and I am being assimilated
Reply to this comment
UGG Boots 5812 Classic Metallic Tall | 11月 29th, 2011 at 09:33
This is my very first time to visit your blog site and I would say you present good advice.You definitely investigate and create well. Stick with it!
Reply to this comment
wholesale new era cap | 12月 14th, 2011 at 16:23
Earlier this year,http://www.wholesalenewerahatscaps.com/ the metals billionaire and owner of the US NBA New Jersey Nets basketball team made a short-lived effort to challenge the United Russia party in this month’s parliamentary elections.
Reply to this comment
Men's Snow Mantra Parka | 12月 20th, 2011 at 11:17
Generally I do not post on blogs, but I would like to say that this post really forced me to do so, Excellent post! http://www.jacketsparkashop.com
Reply to this comment
boat transport | 12月 21st, 2011 at 20:19
I tip my hat to you, finally I integrate it into my app. I hope I’ll be pleasantly surprised by this.
Reply to this comment