jQuery的「文檔準備」功能如何工作？

29

查看source code中的函數bindReady。

它們綁定到DOMContentLoaded事件（或在某些瀏覽器上的onreadystatechange）。如果DOMContentLoaded不受支持或由於其他原因未被解僱，它們也會回退到常規加載事件。在瀏覽器支持的話，他們使用此電話：

document.addEventListener("DOMContentLoaded", DOMContentLoaded, false);

在IE < 9：

document.attachEvent("onreadystatechange", DOMContentLoaded);

的DOMContentLoaded在這些調用第二個實例是他們自己的函數 - 實際上到ready功能權利作爲參考在源代碼中高於bindReady。該功能將通過檢查document.body來檢查DOM樹是否實際完成。如果它還不存在，它們會等待一毫秒（使用setTimeout）並再次檢查。當document.body存在時，它們遍歷您設置的回調列表。

來源

2011-05-11 04:24:29

+0

得愛jQuery！ – turtlepick 2011-05-11 04:35:14

5

jQuery沒有做JavaScript不能做/不做的任何事 - 它只是一個JavaScript框架/庫。它所做的是提供瀏覽器實現的JavaScript事件的包裝，例如onload（$.load()）和DOMContentLoaded（$.ready()）。當然，還有很多工作要做，試圖在跨瀏覽器的情況下儘可能標準化這種行爲，並圍繞瀏覽器錯誤，問題和不兼容問題開展工作。

例如，IE在IE 9之前並不真正支持DOMContentLoaded，但jQuery必須爲其提供實現。您可能希望看到這些鏈接瞭解更多有關本次活動是和一個如何可能實現，即使沒有jQuery的類似的東西，：

如果你真的想看看jQuery做了什麼，你應該檢查jQuery source。

來源

2011-05-11 04:23:10

8

所以有一點點去幕後，但是這是它的主要內容，直接爲jQuery的源：

// Mozilla, Opera and webkit nightlies currently support this event 
     if (document.addEventListener) { 
      // Use the handy event callback 
      document.addEventListener("DOMContentLoaded", DOMContentLoaded, false); 

      // A fallback to window.onload, that will always work 
      window.addEventListener("load", jQuery.ready, false); 

     // If IE event model is used 
     } else if (document.attachEvent) { 
      // ensure firing before onload, 
      // maybe late but safe also for iframes 
      document.attachEvent("onreadystatechange", DOMContentLoaded); 

      // A fallback to window.onload, that will always work 
      window.attachEvent("onload", jQuery.ready); 

      // If IE and not a frame 
      // continually check to see if the document is ready 
      var toplevel = false; 

      try { 
       toplevel = window.frameElement == null; 
      } catch(e) {} 

      if (document.documentElement.doScroll && toplevel) { 
       doScrollCheck(); 
      } 
     }

所以對於大多數的瀏覽器（Mozilla的，歌劇和Webkit）有一個DOMContentLoaded jQuery正在偵聽的事件，當它被觸發時，它會調用您使用jQuery註冊的所有就緒處理程序。

IE的行爲有點不同，因爲他們沒有DOMContentLoaded事件，他們試圖鉤住onreadystatechange事件的文件，他們也勾了window.onload事件，以及做的代碼偷偷摸摸位，他們不斷嘗試每毫秒滾動頁面（doScrollCheck）。這些火災中哪一個首先觸發準備好的處理程序，而後續事件被忽略。

我希望這是有道理的，並幫助你:)

來源

2011-05-11 04:29:04

jQuery的「文檔準備」功能如何工作？

回答

相關問題