js实现dom元素结构加载代码下载

<script>
window.onload=function(){
  //code
}
</script>

上面的事件其实是当界面中所有的内容加载完毕再去执行函数中的代码，并非是dom元素结构加载完毕去执行。

当然可以利用jQuery的方式实现此功能:

<script>
$(document).ready(function(){ 
  //code
});
</script>

上面的代码确实实现了我们的要求，但是为了实现这个功能就引用庞大的jQuery库，总感觉不是那么核算，如果能够将此功能剥离出来，那么就再好不过了，代码如下:

<script>
(function(){
  var isReady=false; //判断onDOMReady方法是否已经被执行过
  var readyList= [];//把需要执行的方法先暂存在这个数组里
  var timer;//定时器句柄
  
  ready=function(fn){
    if(isReady )
     fn.call( document);
    else
     readyList.push( function() { return fn.call(this);});
    return this;
  }
  var onDOMReady=function(){
    for(var i=0;i< readyList.length;i++){
      readyList[i].apply(document);
    }
    readyList = null;
  }
  var bindReady=function(evt){
    if(isReady) return;
      isReady=true;
    onDOMReady.call(window);
    if(document.removeEventListener){
      document.removeEventListener("DOMContentLoaded", bindReady, false);
    }
    else if(document.attachEvent){
      document.detachEvent("onreadystatechange",bindReady);
      if(window == window.top){
        clearInterval(timer);
        timer = null;
      }
    }
  };
  if(document.addEventListener){
    document.addEventListener("DOMContentLoaded", bindReady, false);
  }
  else if(document.attachEvent){
    document.attachEvent("onreadystatechange", function(){
      if((/loaded|complete/).test(document.readyState))
        bindReady();
      });
      if(window == window.top){
        timer = setInterval(function(){
          try{
             //在IE下用能否执行doScroll判断 dom是否加载完毕
            isReady||document.documentElement.doScroll('left');
          }
          catch(e){
            return;
          }
          bindReady();
        },5);
      }
   }
})();
</script>

上面的代码实现了我们的要求，能够让我们只加载dom结构完毕之后就去执行相关代码。

使用方式:

<script>
ready(function(){
 //code
});
</script>