关于html中body onload会等待到全网页全部加载后,才会执行的问题。这个问题原来是为了解决大量层的隐藏与显示,结果设置了层初始状态隐藏就搞定了。
不过看看关于js的这个问题依然很经典,老外对这么个问题,解决讨论还是很到位的:
The window.onload
Problem - Solved!
Well, when I say solved I mean solved for the two most important browsers - Internet Explorer and Mozilla/Firefox. Still that’s good enough isn’t it?
First, let me define the problem. The window.onload
event is used by programmers to kick-start their web applications. This could be something trivial like animating a menu or something complex like initialising a mail application. The problem is that the onload
event fires after all page content has loaded (including images and other binary content). If your page includes lots of images then you may see a noticeable lag before the page becomes active. What we want is a way to determine when the DOM has fully loaded without waiting for all those pesky images to load also.
Mozilla provides an (undocumented) event tailor-made for this: DOMContentLoaded
. The following code will do exactly what we want on Mozilla platforms:
if (document.addEventListener) {
document.addEventListener("DOMContentLoaded", init, false);
}
So what about Internet Explorer?
IE supports a very handy (but non-standard) attribute for the <script>
tag: defer
. The presence of this attribute will instruct IE to defer the loading of a script until after the DOM has loaded. This only works for external scripts however. Another important thing to note is that this attribute cannot be set using script. That means you cannot create a script using DOM methods and set the defer
attribute - it will be ignored.
Using the handy defer
attribute we can create a mini-script that calls our onload
handler:
<script defer src="ie_onload.js" type="text/javascript"></script>
The contents of this external script would be a single line of code to call our onload
event handler:
init();
There is a small problem with this approach. Other browsers will ignore the defer
attribute and load the script immediately. There are several ways round this. My preferred method is to use conditional comments to hide the deferred script from other browsers:
<!--[if IE]><script defer src="ie_onload.js"></script><![endif]-->
IE also supports conditional compilation. The following code is the JavaScript equivalent of the above HTML:
/*@cc_on @*/
/*@if (@_win32)
document.write("<script defer src="/blog/ie_onload.js>";<\/script>");
/*@end @*/
So far so good? We now need to support the remaining browsers. We have only one choice - the standard window.onload
event:
window.onload = init;
There is one remaining problem (who said this would be easy?). Because we are trapping the onload
event for the remaining browsers we will be calling the init
function twice for IE and Mozilla. To get around this we should flag the function so that it is executed only once. So our init
method will look something like this:
function init() {
if (arguments.callee.done) return;
arguments.callee.done = true;
};
And that, as they say, is that.
I’ve provided a sample page that demonstrates this technique. Start copying.