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

转自：http://blog.guoshuang.com/david/showlog.asp?log_id=2964

英文原文在此：
http://dean.edwards.name/weblog/2005/09/busted/

大意如下：

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

这是原来的方法。

<img class="absmiddle" title="[转载] window.onload 关于页面加载完毕的问题" alt="[转载] window.onload 关于页面加载完毕的问题" src="/default/index/img?u=L2RlZmF1bHQvaW5kZXgvaW1nP3U9YUhSMGNEb3ZMMkpzYjJjdVozVnZjMmgxWVc1bkxtTnZiUzlrWVhacFpDOXBiV0ZuWlhNdmNuVnVZMjlrWlM1bmFXWT0="><span style="color: rgba(204, 204, 204, 1)">[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]</span><br><br>对于 Mozilla 可以这样<br><br><textarea class="bk" for mozilla browsers if document.addeventlistener function null><img class="absmiddle" title="[转载] window.onload 关于页面加载完毕的问题" alt="[转载] window.onload 关于页面加载完毕的问题" src="/default/index/img?u=L2RlZmF1bHQvaW5kZXgvaW1nP3U9YUhSMGNEb3ZMMkpzYjJjdVozVnZjMmgxWVc1bkxtTnZiUzlrWVhacFpDOXBiV0ZuWlhNdmNuVnVZMjlrWlM1bmFXWT0="><span style="color: rgba(204, 204, 204, 1)">[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]</span><br><br>对于 IE 浏览器，可以使用IE特有的 defer 属性。<br><br><textarea class="bk" alert><img class="absmiddle" title="[转载] window.onload 关于页面加载完毕的问题" alt="[转载] window.onload 关于页面加载完毕的问题" src="/default/index/img?u=L2RlZmF1bHQvaW5kZXgvaW1nP3U9YUhSMGNEb3ZMMkpzYjJjdVozVnZjMmgxWVc1bkxtTnZiUzlrWVhacFpDOXBiV0ZuWlhNdmNuVnVZMjlrWlM1bmFXWT0="><span style="color: rgba(204, 204, 204, 1)">[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]</span><br><br>非IE浏览器会忽略 defer 而直接执行 script 代码，你可以有两种办法来屏蔽 非IE浏览器。<br><a class="ubblink" href="http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp" target="_blank" rel="nofollow">conditional comments</a> 条件注释<br><br><textarea class="bk"><!--[if IE]> <script defer type="text/javascript"> alert("DOM 加载完毕！") </script> <![endif]--> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

conditional compilation 条件编辑

<script defer> // for Internet Explorer /*@cc_on @*/ /*@if (@_win32) alert("DOM 加载完毕！") /*@end @*/ </script> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

除此之外的浏览器就使用最上面第一个好了。最后一个问题就是要避免 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 ></p>

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