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

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

这是原来的方法。
<script type="text/javascript">
function init(){
alert("页面加载完毕！");
}
window.onload=init;
</script>

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

对于 IE 浏览器，可以使用IE特有的 defer 属性。
<script defer type="text/javascript">
alert("DOM 加载完毕！")
</script>

非IE浏览器会忽略 defer 而直接执行 script 代码，你可以有两种办法来屏蔽 非IE浏览器。
conditional comments 条件注释
<!--[if IE]>
<script defer type="text/javascript">
alert("DOM 加载完毕！")
</script>
<![endif]-->

conditional compilation 条件编辑
<script defer>
// for Internet Explorer
/*@cc_on @*/
/*@if (@_win32)
    alert("DOM 加载完毕！")
/*@end @*/
</script>

除此之外的浏览器就使用最上面第一个好了。最后一个问题就是要避免 onload 运行多次的问题，加入判断。
<script type="text/javascript">
   function init() {
       // quit if this function has already been called
       if (arguments.callee.done) return;

       // flag this function so we don't do the same thing twice
       arguments.callee.done = true;

       // create the "page loaded" message
       var text = document.createTextNode("Page loaded!");
       var message = document.getElementById("message");
       message.appendChild(text);
   };

   /* for Mozilla */
   if (document.addEventListener) {
       document.addEventListener("DOMContentLoaded", init, null);
   }

   /* for Internet Explorer */
   /*@cc_on @*/
   /*@if (@_win32)
       document.write("<script defer src=ie_onload.js><"+"/script>");
   /*@end @*/

   /* for other browsers */
   window.onload = init;
</script>
<p id="message"></p>