跨浏览器的ready函数的实现,主要采用DOMContentLoaded事件

 DOMContentLoaded事件在大多数情况下去替代window.onload事件,因为window.onload事件必须要等待页面所有元素都下载完后才执行。而DOMContentLoaded事件是在DOM树建成时触发,因此要比onload事件快得多,它是W3C推荐的标准事件。ff,opera已经支持该事件,但IE8还都不支持。因此IE要采用doScroll事件来实现ready,原理是doScroll要在DOM树形成后才能操作。

 
在IE的情况下,用doScroll事件来判断:
<script type="text/javascript">
//<![CDATA[
     var fireDOMReadyEvent = function(){
     window.clearInterval(timer);
     alert('DOM content loaded');
    
     if (!!window.ActiveXObject && window == top){ //也有人用 document.attachEvent 来判断是IE的,问题:如果这个页面是嵌在frame中的,如何使用ready呢?
      var timer = null;
      timer = setInterval(function(){
           try{
                  document.documentElement.doScroll('left');
                  fireDOMReadyEvent();
           }catch(e){};
      });
     }
}
//]]>
</script>
 
跨浏览器的方案:
     // Mozilla,opera,webkit 支持DOMContentLoaded事件
     if(docuemnt.addEventListener && !jQuery.browser.opera)
           //直接使用事件回调即可
         document.addEventListener('DOMContentLoaded',xxx,false);
     //如果是IE并且不是嵌在frame中就需要不断检测文档是否加载完毕
   if(!!window.ActiveXObject  && window == top ){
         (function(){
              try{
                    document.documentElement.doScroll("left");
              }catch(error){
                 setTimeout(arguments.callee,0);
                 return;
              }
           //在这里可以调用等待运行的函数
           })();
     }
     //opera的DOMContentLoaded事件发生后,其css也是是还不能完全可用的,所以要特殊处理,就是判断每个css的tag都是不是可用了
      if(/(opera)(?:.*version)?[ \/]([\w.]+)/i.test(navigator.userAgent)){
           document.addEventListener("DOMContentLoader",function(){
                 for (var i = 0;i<document.styleSheets.length;i++){
                       if(document.styleSheet.disabled){
                             setTimeout(argument.callee,0);
                             return;
                       }
                      //在这里可以调用等待运行的函数
                 }
           },false);
      }
   //safari中document.readyState的状态为loaded或complete时,css文件引入还未能确定是不是解析完了的,所以要判断其css文件数目
      if( /WebKit/i.test(navigator.userAgent) ){
            var numStyles;
            (function(){
              if(document.readyState != "loaded" && document.readyState != "complete"){
                       setTimeout(argument.callee,0);
                       return;
              }
              if(numStyles === undefined){
                       numStyles = jQuery("style,link[rel=stylesheet]").length;
              }  
              if(document.styleSheets.length != numStyles){
                     setTimeout(argument.callee,0);
                     return;
              }
             //在这里可以调用等待运行的函数
         })();
      
         //最后,如果上面的hack都不支持的话,就用onload事件
         window.onload = function(){
                 //在这里可以调用等待运行的函数
         }
}
 
 
参考:
http://blog.pchome.net/article/list_5670316_17126_1.html?showAll=1
http://www.pin5i.com/showtopic-26225.html
http://www.never-online.net/blog/article.asp?id=230
 

你可能感兴趣的:(事件,职场,休闲,ready函数)