jQuery 的 ready 函式是如何工作的？

學習 jquery 有許多途徑，我們今天從 jquery 的 ready 函式開始。本例中的**都來自於 jquery 指令碼庫。

如果你使用過 jquery , 就必然使用過 ready 函式，它用來註冊當頁面準備好之後可以執行的函式。

問題來啦，我們的頁面什麼時候準備好了呢？

最基本的處理方式就是頁面的 onload 事件，我們在處理這個事件的時候，可以有多種方式，即可以通過 html 方式，直接寫在 body 元素的開始標記中，也可以使用事件註冊的方式來使用，這又可以分為 dom0 方式和 dom2 方式。再考慮到瀏覽器的相容性，使用 dom2 方式寫出來，如下所示。

if
(document.addeventlistener)  else

不過 onload 事件要等到所有頁面元素載入完成才會觸發, 包括頁面上的等等。如果網頁上有大量的，效果可想而知，使用者可能在沒有看到的時候，就已經開始操作頁面了，而這時我們的頁面還沒有初始化，事件還沒有註冊上，這豈不是太晚了！

除了大家熟知的 onload 事件之外，與 dom 中的 onload 事件相近的，我們還有 domcontentloaded 事件可以考慮，基於標準的瀏覽器支援這個事件, 當所有 dom 解析完以後會觸發這個事件。

這樣，對於基於標準的瀏覽器來說，我們還可以註冊這個事件的處理。這樣，我們可能更早地捕獲到載入完成的事件。

if
(document.addeventlistener)

不標準的瀏覽器怎麼辦呢？

如果瀏覽器存在 document.onreadystatechange 事件，當該事件觸發時，如果 document.readystate=complete 的時候，可視為 dom 樹已經載入。

不過，這個事件不太可靠，比如當頁面中存在的時候，可能反而在 onload 事件之後才能觸發，換言之，它只能正確地執行於頁面不包含二進位制資源或非常少或者被快取時作為乙個備選吧。

if
(document.addeventlistener)  else

domcontentloaded 函式在做什麼呢？最終還是要呼叫 jquery.ready 函式。

domcontentloaded = function
()  
else
if ( document.readystate === "complete") 
}

msdn 關於 jscript 的乙個方法有段不起眼的話，當頁面 dom 未載入完成時，呼叫 doscroll 方法時，會產生異常。那麼我們反過來用，如果不異常，那麼就是頁面dom載入完畢了！

diego perini 在 2007 年的時候，報告了一種檢測 ie 是否載入完成的方式，使用 doscroll 方法呼叫。詳細的說明見這裡。

原理是對於 ie 在非 iframe 內時，只有不斷地通過能否執行 doscroll 判斷 dom 是否載入完畢。在本例中每間隔 50 毫秒嘗試去執行 doscroll，注意，由於頁面沒有載入完成的時候，呼叫 doscroll 會導致異常，所以使用了 try -catch 來捕獲異常。

(function
doscrollcheck()  
catch
(e) 
//and execute any waiting functions
jquery.ready();
}})();

如果我們註冊 ready 函式的時間點太晚了，頁面已經載入完成之後，我們才註冊自己的 ready 函式，那就用不著上面的層層檢查了，直接看看當前頁面的 readystate 就可以了，如果已經是 complete ，那就可以直接執行我們準備註冊的 ready 函式了。不過 chriss 報告了乙個很特別的錯誤情況，我們需要延遲一下執行。

這樣，通過設定為 1, 我們可以讓程式在瀏覽器支援的最小時間間隔之後執行了。

//
catch cases where $(document).ready() is called after the browser event has already occurred.
//we once tried to use readystate "interactive" here, but it caused issues like the one
//discovered by chriss here: 
if (document.readystate === "complete")

在 jquery 中完整的**如下所示。位於 jquery 1.8.3 源**的 #842 行。

jquery.ready.promise = function
( obj )  else
if( document.addeventlistener )  else
catch
(e) {}
if ( top &&top.doscroll )  
catch
(e) 
//and execute any waiting functions
jquery.ready();
}})();}}
}return
readylist.promise( obj );
};

那麼，又是誰來呼叫呢？當然是需要的時候，在我們呼叫 ready 函式的時候，才需要註冊這些判斷頁面是否完全載入的處理，這段**在 1.8.3 中位於**的 #244 行，如下所示：

ready: function
( fn )

在頁面上引用 jquery 指令碼庫之後，執行了 jquery 的初始化函式，初始化函式中建立了 ready 函式。我們在通過 ready 函式註冊事件處理之前，jquery 完成了頁面檢測**的註冊。這樣。當頁面完全載入之後，我們註冊的函式就被呼叫了。

jQuery 的 ready 函式是如何工作的？

jQuery 的 ready 函式是如何工作的？

jQuery中ready函式與匿名函式的強制執行

簡單的JQuery之Ready

jQuery 的 ready 函式是如何工作的？

jQuery 的 ready 函式是如何工作的？

jQuery中ready函式與匿名函式的強制執行

簡單的JQuery之Ready

相關推薦