相容低版本IE瀏覽器的DOMContentLoaded事件

用過jQuery的朋友一定對$(document).reay(function(){})不會陌生。

它的作用是當文件結構載入完畢就會觸發事件，其實就是對DOMContentLoaded事件的封裝。

下面是相容低版本IE瀏覽器的DOMContentLoaded的事件，程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
//儲存domReady的事件佇列
    eventQueue = [];
    //判斷DOM是否載入完畢
    isReady = false;
    //判斷DOMReady是否繫結
    isBind = false;
    /*執行domReady()
    *
    *@param    {function}
    *@execute  將事件處理程式壓入事件佇列,並繫結DOMContentLoaded
    *          如果DOM載入已經完成，則立即執行
    *@caller
    */
    function domReady(fn){
      if (isReady) {
        fn.call(window);
      }
      else{
        eventQueue.push(fn);
      };
      bindReady();
    };
    /*domReady事件繫結
    *
    *@param    null
    *@execute  現代瀏覽器通過addEvListener繫結DOMContentLoaded,包括ie9+
    ie6-8通過判斷doScroll判斷DOM是否載入完畢
    *@caller   domReady()
    */
    function bindReady(){
      if (isReady) return;
      if (isBind) return;
      isBind = true;
      if (window.addEventListener) {
        document.addEventListener('DOMContentLoaded',execFn,false);
      }
      else if (window.attachEvent) {
        doScroll();
      };
    };
    /*doScroll判斷ie6-8的DOM是否載入完成
     *
     *@param    null
     *@execute  doScroll判斷DOM是否載入完成
     *@caller   bindReady()
    */
    function doScroll(){
      try{
        document.documentElement.doScroll('left');
      }
      catch(error){
        return setTimeout(doScroll,20);
      };
      execFn();
    };
    /*執行事件佇列
    *
    *@param    null
    *@execute  迴圈執行佇列中的事件處理程式
    *@caller   bindReady()
    */
    function execFn(){
      if (!isReady) {
        isReady = true;
        for (var i = 0; i < eventQueue.length; i++) {
          eventQueue[i].call(window);
        };
        eventQueue = [];
      };
    };
    //js檔案1
    domReady(function(){
    });
    //js檔案2
    domReady(function(){
    });
    //注意，如果是非同步載入的js就不要繫結domReady方法，不然函式不會執行，
    //因為非同步載入的js下載之前，DOMContentLoaded已經觸發，addEventListener執行時已經監聽不到了