导航栏： 首页 评论列表

判断DOM加载完毕的几种方法

默认分类 2011-03-27 19:27:32

转载: http://blog.csdn.net/cheng5128/archive/2009/08/26/4613782.aspx 
通常来说，window.onload就够用了，如果想加载多个事件，我们可以采取以下方式： 
  1. window.onload = function(){ 
  2.        func1(); 
  3.        func2(); 
  4.        func3(); 
  5.       //更多加载事件……………… 
  6. } 
但如果由于某种特殊需要，我们不能合在一起写吗？如当前区域是面向管理员，后台生成页面时只有当用户是管理员，页面才生成这部分，而这部分也用到一些特殊的脚本，上面的方法就歇菜了！ 
  1. //后台代码 
  2. <script type="text/javascript"> 
  3.       window.onload = function(){ 
  4.         func1(); 
  5.         func2(); 
  6.        //加载普通用户用到的脚本…… 
  7.       } 
  8. </script> 
  9. <%# 以下脚本是为管理员准备的 %> 
  10. <%if@user.role == "manager" %> 
  11.       window.onload = function(){ 
  12.       func1(); 
  13.       func2(); 
  14.      //加载机密脚本…… 
  15.       } 
  16. <% end %> 
这种情况生成出来的页面拥有两个window.onload代码块，很显然，第二个覆盖掉第一个。这时，轮到loadEvent函数出场了。 
  1. var loadEvent = function(fn) { 
  2.     var oldonload = window.onload; 
  3.    if (typeof window.onload != 'function') { 
  4.         window.onload = fn; 
  5.     }else { 
  6.         window.onload = function() { 
  7.             oldonload(); 
  8.             fn(); 
  9.         } 
  10.     } 
  11. } 
它非常完美地解决了互相覆盖的问题，用法如下： 
loadEvent(func1);
loadEvent(func2); 
loadEvent(func3); 
//更多加载事件
但现实的问题总是如此出奇不意，也如此刁钻邪门。最近我想把所有的函数放到一个闭包中，以免除命名冲突之苦，比如那个有名的$的DOM选择器。JQuery，Prototype，mootool都用它做选择器的名字，共存成了个严重的问题。 
  1. (function(){ 
  2.    if(!window.JS){ 
  3.         window['JS'] = {} 
  4.     } 
  5.     var onReady = function(fn){ 
  6.         var oldonload = window.onload; 
  7.        if (typeof window.onload != 'function') { 
  8.             window.onload = fn; 
  9.         }else { 
  10.             window.onload = function() { 
  11.                 oldonload(); 
  12.                 fn(); 
  13.             } 
  14.         } 
  15.     } 
  16.     JS.onReady = onReady; 
  17.     var $ = function(id){ 
  18.        return document.getElementById(id); 
  19.     } 
  20.     JS.$ = $; 
  21. })() 
test.htm 
  1. <!doctype html> 
  2. <html dir="ltr" lang="zh-CN"> 
  3.   <head> 
  4.     <meta charset="utf-8"/> 
  5.     <meta http-equiv="X-UA-Compatible" content="IE=Edge"> 
  6.     <title>闭包环境中的事件加载</title> 
  7.     <script type="text/javascript"> 
  8.       (function(){ 
  9.        if(!window.JS){ 
  10.           window['JS'] = {} 
  11.         } 
  12.         var onReady = function(fn){ 
  13.           var oldonload = window.onload; 
  14.          if (typeof window.onload != 'function') { 
  15.             window.onload = fn; 
  16.           }else { 
  17.             window.onload = function() { 
  18.               oldonload(); 
  19.               fn(); 
  20.             } 
  21.           } 
  22.         } 
  23.         JS.onReady = onReady; 
  24.         var $ = function(id){ 
  25.          return document.getElementById(id); 
  26.         } 
  27.         JS.$ = $; 
  28.       })() 
  29.       JS.onReady(function(){ 
  30.         var $ = JS.$; 
  31.        try{ 
  32.         alert($("test").innerHTML); 
  33.         }catch(e){ 
  34.            alert(e); 
  35.         } 
  36.       }) 
  37.     </script> 
  38.   </head> 
  39.   <body> 
  40.     <p id="test">Test</p> 
  41.   </body> 
  42. </html> 
不过像这个如此有名的函数其实还有一个缺陷，就是新加载的函数被放置于前一个加载函数的作用域之用，加载函数越多，其栈的层次越深，显然性能耗很大。不过像onclick,onload,onmouseout等这样函数，W3C把它们归属于DOM0的事件模型，好处是适用范围广，但签于其性能，于是又提出DOM1.0 的事件模型与DOM2.0 的事件模型，DOM2就是原微软的事件模型与原网景的事件模型的合璧，既能捕获又能冒泡，而且多绑定多类型事件而不会导致后者覆盖前者。于是人们总搞出了有名的addEvent函数出来，我们用addEvent来改造我们的事件加载。 
  1. (function(){ 
  2.    if(!window.JS){ 
  3.         window['JS'] = {} 
  4.     } 
  5.     var addEvent = function( obj, type, fn ) { 
  6.        if (obj.addEventListener) 
  7.             obj.addEventListener( type, fn,false ); 
  8.        elseif (obj.attachEvent) { 
  9.             obj["e"+type+fn] = fn; 
  10.             obj.attachEvent( "on"+type, function() { 
  11.                 obj"e"+type+fn; 
  12.             } ); 
  13.         } 
  14.     }; 
  15.     var onReady = function(loadEvent,waitForImages) { 
  16.        if(waitForImages) { 
  17.            return addEvent(window, 'load', loadEvent); 
  18.         } 
  19.     } 
  20.     JS.onReady = onReady; 
  21.     var $ = function(id){ 
  22.        return document.getElementById(id); 
  23.     } 
  24.     JS.$ = $; 
  25. })() 
  26.  
test.htm 
  1. <!doctype html> 
  2. <html dir="ltr" lang="zh-CN"> 
  3.   <head> 
  4.     <meta charset="utf-8"/> 
  5.     <meta http-equiv="X-UA-Compatible" content="IE=Edge"> 
  6.     <title>闭包环境中的事件加载</title> 
  7.     <script type="text/javascript"> 
  8.    (function(){ 
  9.    if(!window.JS){ 
  10.         window['JS'] = {} 
  11.     } 
  12.     var addEvent = function( obj, type, fn ) { 
  13.        if (obj.addEventListener) 
  14.             obj.addEventListener( type, fn,false ); 
  15.        elseif (obj.attachEvent) { 
  16.             obj["e"+type+fn] = fn; 
  17.             obj.attachEvent( "on"+type, function() { 
  18.                 obj"e"+type+fn; 
  19.             } ); 
  20.         } 
  21.     }; 
  22.     var onReady = function(loadEvent,waitForImages) { 
  23.        if(waitForImages) { 
  24.            return addEvent(window, 'load', loadEvent); 
  25.         } 
  26.     } 
  27.     JS.onReady = onReady; 
  28.     var $ = function(id){ 
  29.        return document.getElementById(id); 
  30.     } 
  31.     JS.$ = $; 
  32. })() 
  33.  
  34. JS.onReady(function(){ 
  35.     alert(JS.$("test").innerHTML) 
    36. <li class="alt" style="border-left-width:1px;border-left-style:solid;border-left-color:rgb(209, 215, 220);background


    >> 留言评论