jquery ready函數深刻剖析。本站提示廣大學習愛好者：（jquery ready函數深刻剖析）文章只能為提供參考，不一定能成為您想要的結果。以下是jquery ready函數深刻剖析正文
比來看一些關於jquery ready 有人說他遲緩，有人說他快，說法紛歧。 因而本身深刻研討一下。起首看了一下jquery 文檔 關於ready 的描寫
While JavaScript provides the load event for executing code when a page is rendered, this event does not get triggered until all assets such as images have been completely received. In most cases, the script can be run as soon as the DOM hierarchy has been fully constructed. The handler passed to .ready() is guaranteed to be executed after the DOM is ready, so this is usually the best place to attach all other event handlers and run other jQuery code. When using scripts that rely on the value of CSS style properties, it's important to reference external stylesheets or embed style elements before referencing the scripts. In cases where code relies on loaded assets (for example, if the dimensions of an image are required), the code should be placed in a handler for the load event instead.
翻譯一下
固然JavaScript供給了load事宜，當頁面襯著完成以後會履行這個函數，在所以元素加載完成之前，這個函數不會被挪用，例如圖象。然則在年夜多半情形下，只需DOM構造加載完，劇本便可以盡快運轉。傳遞給.ready()的事宜句柄在DOM預備好後立刻履行，是以平日情形下，最好把綁定事宜句柄和其他jQuery代碼都到這裡來。然則當劇本依附於CSS款式屬性時，必定要在劇本之前引入內部款式或內嵌款式的元素。
假如代碼依附於需加載完的元素（例如，想獲得一個圖片的尺寸年夜小），應當用.load()事宜取代，並把代碼放到load事宜句柄中。
按照文檔下面的解釋，在頁面內有年夜量文檔構造，圖片資本時刻，ready 是快於 load 的。文檔外面也清楚的剖析了甚麼時刻用ready 甚麼時刻用load。
上面剖析一下jquery ready 的運轉流程
$(handler) or $(document).ready(handler) → ready() → bindReady() → 履行readyList.add( fn ) fn
年夜致看一下源碼
上面是jquery 的 對象的 ready 源碼
jQuery.fn = jQuery.prototype = {
constructor: jQuery,
init: function( selector, context, rootjQuery ) {
// HANDLE: $(function)
// Shortcut for document ready
// 假如函數，則以為是DOM ready句柄
if ( jQuery.isFunction( selector ) ) {
return rootjQuery.ready( selector );
}
},
ready: function( fn ) {
// Attach the listeners
jQuery.bindReady(); // 綁定DOM ready監聽器，跨閱讀器，兼容尺度閱讀器和IE閱讀器
// Add the callback
readyList.add( fn );// 將ready句柄添加到ready異步句柄隊列
return this;
}
};
挪用jquery 的 bindReady , 增長ready回調!
上面看一下 bindReady 年夜致源碼
bindReady: function() { // jQuery.bindReady
if ( readyList ) {
return;
}
readyList =jQuery.Callbacks( "once memory" )// 初始化ready異步事宜句柄隊列
// Catch cases where $(document).ready() is called after the
// browser event has already occurred.
// 假如DOM曾經終了，立刻挪用jQuery.ready
if ( document.readyState === "complete" ) {
// Handle it asynchronously to allow scripts the opportunity to delay ready
// 主要的是異步
return setTimeout( jQuery.ready, 1 );
}
//上面是一些進攻性的編程 故此省略
......
}
這個應當很清晰 document.readyState == 'complete' 就會 履行 jquery 的 ready ，我很迷惑的是為何是 setTiemout(jQuery.ready,1) ,請前往下面看ready 的代碼， readyList.add( fn )， 假如不是異步的，履行回調的就會放到 readyList.add( fn )之前了，由於履行是在jQuery 的ready 外面 readyList.fireWith( document, [ jQuery ] );readylist 是jquery 的callbacks ，就是治理回調函數的！不清晰的可以看看文檔。
注：你會發明有兩個ready，這兩個是分歧的，一個放到 jquery.prototype 就是我們$(doucument).ready這個，另外一個是jquery的對象辦法斷定能否曾經ready了的辦法
ps ： jquery胸無點墨，文章有毛病的地方，還請列位斧正！
以上就是對 jquery ready的材料整頓，後續持續整頓相干材料，感謝年夜家對本站的支撐！
