window.onload问题解决啦！

 原文地址： http://dean.edwards.name/weblog/2005/09/busted/

我所谓的解决只是针对两款主要的浏览器——IE和Mozilla/Firefox。难道这还不够吗？

首先，让我先定义这个问题。程序员在他们的web应用程序的最开始调用window.onload 事件。对于菜单的动态效果或者更复杂的事情，如邮件系统的初始化，使用这个事件是很平常的。但是问题就在于onload事件会在所有页面内容（包括图片和其它二进制内容）被加载后才会触发。如果你的页面包含了大量的图片，那么你可能会发现在页面激活之前有一个显著的延迟。我们想做的就是寻找一种方法来确定DOM被完全的加载时不用等待所有那些讨厌的图片加载完毕。

Mozilla提供了一个特定的事件DOMContentLoaded。下面的代码准确的实现了在Mozilla平台下，我们想要解决的问题：

  
  

   
   

    
    
    
    //
    
     Mozilla浏览器
    
    

    
    

    
    if
    
     (document.addEventListener) 
    
    ...
    
    {
  document.addEventListener("DOMContentLoaded", init, false);
}
   
   
  
  

那么IE怎么办呢？

IE对 <script>标签提供一个非常方便的属性：defer。这个属性的意义是指示IE延迟脚本的加载直到DOM被加载。但是这仅仅对外部脚本起作用。另一个重要的问题是，这个属性不能使用脚本动态的添加。这意味着，你不能使用DOM方法创建一个脚本并且设置defer属性，因为这会被忽略。

使用方便的defer属性，我们能够创建一个一小段脚本来调用我们的onload事件

  
  

   
   

    
    
    
    <
    
    script 
    
    defer src
    
    ="ie_onload.js"
    
     type
    
    ="text/javascript"
    
    ></
    
    script
    
    >
   
   
  
  

这个外部脚本的内容仅仅是一行代码，用来调用我们的onload事件：

 
 

  
  

   
   init();
  
  
 
 

使用这个方法，这就不算问题了。但是其他浏览器会忽略defer属性并立即加载脚本。这里有一些方法来绕过这个问题。我钟爱的方法是使用 条件注释对其他浏览器隐藏这段脚本。

  
  

   
   

    
    
    
    <!--
    
    [if IE]><script defer src="ie_onload.js"></script><![endif]
    
    -->
   
   
  
  

IE也支持 条件编译。下面的JavaScript代码和上面的HTML是等效的

  
  

   
   

    
    
    
    //
    
     IE浏览器
    
    

    
    

    
    /**/
    
    /*@cc_on @*/
    
    

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

到目前为止看起来一切顺利？我们现在需要支持其他的浏览器。我们只有一个选择——标准的window.onload事件：

  
  

   
   

    
    
    
    //
    
     其他浏览器
    
    

    
    
window.onload 
    
    =
    
     init;
   
   
  
  

现在就剩下一个问题了（谁说这个问题简单？）。因为对于其他浏览器我们只能使用onload事件，但是对于IE和Mozilla，我们会调用两次init方法。为了避开这个问题，我们应当做一个标志方法，以至于onload事件只执行一次。所以我们的init方法会像下面的代码一样：

 
 

  
  

   
   
   
   
   
   function
   
    init() 
   
   ...
   
   {
//如果这个方法已经被调用过，就推出
  if (arguments.callee.done) return;
//标志这个方法以至于我们不会做同样的事情两次
  arguments.callee.done = true;

  // 其他操作
}
   
   ;
  
  
 
 

And that, as they say, is that.

我提供了一个 例子，来证明这个技术。