window.onload 关于页面加载完毕的问题
2008-02-03 20:23
555 查看
英文原文在此:
http://dean.edwards.name/weblog/2005/09/busted/
大意如下:
我们经常使用 window.onload 来处理页面,当页面加载完成做一些事情。但这个 window.onload 是页面全部加载完成,甚至包括图片,而我们实际上经常需要的是文档 DOM 加载完毕!
这是原来的方法。
<script type="text/javascript">function init(){alert("页面加载完毕!");}window.onload=init;</script>
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
对于 Mozilla 可以这样
<script type="text/javascript">// for Mozilla browsersif (document.addEventListener) {document.addEventListener("DOMContentLoaded", function(){alert("DOM加载完毕!")}, null);}</script>
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
对于 IE 浏览器,可以使用IE特有的 defer 属性。
<script defer type="text/javascript">alert("DOM 加载完毕!")</script>
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
非IE浏览器会忽略 defer 而直接执行 script 代码,你可以有两种办法来屏蔽 非IE浏览器。
conditional comments 条件注释
<!--[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 calledif (arguments.callee.done) return;// flag this function so we don't do the same thing twicearguments.callee.done = true;// create the "page loaded" messagevar 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>
真是很佩服老外的这种钻研精神,这么个小问题引申出来这么多知识,值得我们好好学习。:(
----------------------------------------------------------------------------------------------------------------------------------
我补充一句:只有IE才支持defer的,而且脚本必须放在<body>之外(一般是head内)才正常,否则还是会被立即执行
http://dean.edwards.name/weblog/2005/09/busted/
大意如下:
我们经常使用 window.onload 来处理页面,当页面加载完成做一些事情。但这个 window.onload 是页面全部加载完成,甚至包括图片,而我们实际上经常需要的是文档 DOM 加载完毕!
这是原来的方法。
<script type="text/javascript">function init(){alert("页面加载完毕!");}window.onload=init;</script>
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
对于 Mozilla 可以这样
<script type="text/javascript">// for Mozilla browsersif (document.addEventListener) {document.addEventListener("DOMContentLoaded", function(){alert("DOM加载完毕!")}, null);}</script>
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
对于 IE 浏览器,可以使用IE特有的 defer 属性。
<script defer type="text/javascript">alert("DOM 加载完毕!")</script>
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
非IE浏览器会忽略 defer 而直接执行 script 代码,你可以有两种办法来屏蔽 非IE浏览器。
conditional comments 条件注释
<!--[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 calledif (arguments.callee.done) return;// flag this function so we don't do the same thing twicearguments.callee.done = true;// create the "page loaded" messagevar 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>
真是很佩服老外的这种钻研精神,这么个小问题引申出来这么多知识,值得我们好好学习。:(
----------------------------------------------------------------------------------------------------------------------------------
我补充一句:只有IE才支持defer的,而且脚本必须放在<body>之外(一般是head内)才正常,否则还是会被立即执行
相关文章推荐
- window.onload 关于页面加载完毕的问题
- window.onload 关于页面加载完毕的问题
- [转载] window.onload 关于页面加载完毕的问题
- window.onload加载完毕的问题及解决方案(上)
- 关于页面中body onload 和 window.onload 冲突的问题的解决
- window.onload 加载完毕的问题及解决方案(下)
- window.onload加载完毕的问题及解决方案(上)
- window.onload 加载完毕的问题及解决方案(上)
- window.onload 加载完毕的问题及解决方案(上)
- window.onload 加载完毕的问题及解决方案(下)
- 关于window.onload()的加载问题
- window.onload加载完毕的问题及解决方案(下)
- window.onload加载完毕的问题及解决方案(下)
- 关于页面中body onload 和 window.onload 冲突的问题的解决
- 关于window.onload()的加载问题
- window.onload 加载完毕的问题及解决方案(下)
- 关于页面中body onload 和 window.onload 冲突的问题的解决
- JS 页面加载触发事件 document.ready和window.onload的区别
- 关于页面动态加载控件当页面回发后控件消失的问题