js如何實現dom元素結構載入完畢再去執行相關程式碼

關於看到這個題目可能感覺解決此問題非常的簡單，因為有一個常用的事件:

[JavaScript] 純文字檢視 複製程式碼
window.onload=function(){
  //code
}

上面的事件其實是當介面中所有的內容載入完畢再去執行函式中的程式碼，並非是dom元素結構載入完畢去執行。

當然可以利用jQuery的方式實現此功能:

[JavaScript] 純文字檢視 複製程式碼
$(document).ready(function(){ 
  //code
});

上面的程式碼確實實現了我們的要求，但是為了實現這個功能就引用龐大的jQuery庫，總感覺不是那麼核算，如果能夠將此功能剝離出來，那麼就再好不過了，程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
(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);
      }
   }
})();

上面的程式碼實現了我們的要求，能夠讓我們只載入dom結構完畢之後就去執行相關程式碼。

使用方式:

[JavaScript] 純文字檢視 複製程式碼
ready(function(){
 //code
});