window.onload 关于页面加载完毕的问题

英文原文在此：

http://dean.edwards.name/weblog/2005/09/busted/

大意如下：

我们经常使用 window.onload 来处理页面，当页面加载完成做一些事情。但这个 window.onload 是页面全部加载完成，甚至包括图片，而我们实际上经常需要的是文档 DOM 加载完毕！

这是原来的方法。

</p><p><script type="text/javascript"></p><p>function init(){</p><p> alert("页面加载完毕！");</p><p>}</p><p>window.onload=init;</p><p></script></p><p>

 [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

对于 Mozilla 可以这样

</p><p><script type="text/javascript"></p><p>// for Mozilla browsers</p><p>if (document.addEventListener) {</p><p> document.addEventListener("DOMContentLoaded", function(){alert("DOM加载完毕！")}, null);</p><p>}</p><p></script></p><p>

 [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

对于 IE 浏览器，可以使用IE特有的 defer 属性。

</p><p><script defer type="text/javascript"></p><p>alert("DOM 加载完毕！")</p><p></script></p><p>

 [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

非IE浏览器会忽略 defer 而直接执行 script 代码，你可以有两种办法来屏蔽 非IE浏览器。

conditional comments 条件注释

</p><p><!--[if IE]></p><p><script defer type="text/javascript"></p><p>alert("DOM 加载完毕！")</p><p></script></p><p><![endif]--></p><p>

 [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

conditional compilation 条件编辑

</p><p><script defer></p><p>// for Internet Explorer</p><p>/*@cc_on @*/</p><p>/*@if (@_win32)</p><p> alert("DOM 加载完毕！")</p><p>/*@end @*/</p><p></script></p><p>

 [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

除此之外的浏览器就使用最上面第一个好了。最后一个问题就是要避免 onload 运行多次的问题，加入判断。

</p><p><script type="text/javascript"></p><p> function init() {</p><p> // quit if this function has already been called</p><p> if (arguments.callee.done) return;</p><p> // flag this function so we don't do the same thing twice</p><p> arguments.callee.done = true;</p><p> // create the "page loaded" message</p><p> var text = document.createTextNode("Page loaded!");</p><p> var message = document.getElementById("message");</p><p> message.appendChild(text);</p><p> };</p><p> /* for Mozilla */</p><p> if (document.addEventListener) {</p><p> document.addEventListener("DOMContentLoaded", init, null);</p><p> }</p><p> /* for Internet Explorer */</p><p> /*@cc_on @*/</p><p> /*@if (@_win32)</p><p> document.write("<script defer src=ie_onload.js><"+"/script>");</p><p> /*@end @*/</p><p> /* for other browsers */</p><p> window.onload = init;</p><p> </script></p><p id="message"><p>

 

真是很佩服老外的这种钻研精神,这么个小问题引申出来这么多知识，值得我们好好学习。