ready是先執行的，load後執行，DOM文檔的加載步驟

在jq中在文檔載入完畢後有這幾種方式去執行指定函數：

$(document).ready(function() { // ...代碼... }); //document ready 簡寫 $(function() { // ...代碼... }); $(window).load(function() { // ...代碼... });

$(function(){}) 的方式實際上是 $(document).ready() 的簡寫，具體能夠看看jq構造器那塊。

ready與load誰先執行

這個問題在面試的時候也會常常被提到，ready是先執行的，load後執行，DOM文檔的加載步驟：

(1) 解析HTML結構。 (2) 加載外部腳本和樣式表文件。 (3) 解析並執行腳本代碼。 (4) 構造HTML DOM模型。//ready (5) 加載圖片等外部文件。 (6) 頁面加載完畢。//load 分析緣由

.ready() 都是做用於 window.onload 事件的。

jQuery.fn.ready = function( fn ) { // Add the callback jQuery.ready.promise().done( fn ); return this; };

當調用ready事件時，jq就會把函數添加到一個回調列表中。

而 .load() 做用的是爲每一個匹配元素的load事件綁定處理函數。

$(window).load( function(){ alert("文檔加載完畢!"); } ); $("img").load( function(){ alert( "圖片[" + this.alt + "]加載完畢!" ); } );

load的寫法也發生了一些改變，1.8版本以後,load就拋棄了,只剩下ajax的load了，它的函數原型：

jQuery.fn.load = function( url, params, callback ) { //code... return this; }

所以在高版本中它的使用應該是：

$('#result').load('ajax/test.html', function() { alert('Load was performed.'); }); ready源碼 // readyList.promise() === jQuery.ready.promise() var readyList; jQuery.fn.ready = function( fn ) { // promise後添加回調 jQuery.ready.promise().done( fn ); // 鏈式 return this; }; jQuery.extend({ // 此判斷防止重複觸發 isReady: false, // 須要幾回jQuery.ready()調用，纔會觸發promise和自定義ready事件 readyWait: 1, // Hold (or release) the ready event holdReady: function( hold ) { if ( hold ) { // true，延遲次數 +1 jQuery.readyWait++; } else { // 無參數，消減次數 -1 jQuery.ready( true ); } }, // 觸發promise和自定義ready事件 ready: function( wait ) { // ready(true)時，消減次數的地方。也能代替幹ready()的事 if ( wait === true ? --jQuery.readyWait : jQuery.isReady ) { return; } // ready()調用時，標記dom已加載完成 jQuery.isReady = true; // ready(2881064151)可以設置isReady，只能消減默認的那1次 if ( wait !== true && --jQuery.readyWait > 0 ) { return; } // 觸發promise，jQuery.fn.ready(fn)綁定函數都被觸發 readyList.resolveWith( document, [ jQuery ] ); // 觸發自定義ready事件，並刪除事件綁定 if ( jQuery.fn.triggerHandler ) { jQuery( document ).triggerHandler( "ready" ); jQuery( document ).off( "ready" ); } } }); // 解綁函數 function completed() { document.removeEventListener( "DOMContentLoaded", completed, false ); window.removeEventListener( "load", completed, false ); jQuery.ready(); } jQuery.ready.promise = function( obj ) { if ( !readyList ) { readyList = jQuery.Deferred(); // 判斷執行到這時，是否已經加載完成 if ( document.readyState === "complete" ) { // 再也不須要綁定任何監聽函數，直接觸發jQuery.ready。延遲一會，等代碼執行完 setTimeout( jQuery.ready ); } else { // Use the handy event callback document.addEventListener( "DOMContentLoaded", completed, false ); // 個別瀏覽器狀況，錯過了事件仍可觸發 window.addEventListener( "load", completed, false ); } } return readyList.promise( obj ); }; // 執行。生成deferred對象，綁定好監聽邏輯 jQuery.ready.promise();

readyList = jQuery.Deferred(); 回調列表是 $.Deferred 對象,事件監聽經過：

document.addEventListener( "DOMContentLoaded", completed, false ); window.addEventListener( "load", completed, false );

爲了達到兼容不一樣瀏覽器，一個添加到 window 一個添加到 document ，經過 $.isReady 避免屢次調用。

function completed() { document.removeEventListener( "DOMContentLoaded", completed, false ); window.removeEventListener( "load", completed, false ); jQuery.ready(); }

對事件進行解綁，調用 $.ready() :

readyList.resolveWith( document, [ jQuery ] );

執行異步對象裏的函數隊列。

load

load的實現就比較簡單， jQuery.fn.load = function( url, params, callback ){} 它幾乎與 $.get(url, data, success) 等價,由於它就是經過 $.ajax() 實現的，不一樣的是它的url能夠包含一個空格或多個空格，緊接第一個空格的字符串則是決定所加載內容的 jQuery 選擇器:

$("#result").load("ajax/test.html #container");

若是執行該方法，則會取回 ajax/test.html 的內容，不過而後， jQuery 會解析被返回的文檔，來查找帶有容器 ID 的元素。該元素，連同其內容，會被插入帶有結果 ID 的元素中，所取回文檔的其他部分會被丟棄。

off = url.indexOf(" "); if ( off >= 0 ) { selector = jQuery.trim( url.slice( off ) ); url = url.slice( 0, off ); }

最後來看看它ajax部分：

jQuery.ajax({ url: url, // if "type" variable is undefined, then "GET" method will be used type: type, dataType: "html", data: params }).done(function( responseText ) { // Save response for use in complete callback response = arguments; self.html( selector ? // If a selector was specified, locate the right elements in a dummy div // Exclude scripts to avoid IE 'Permission Denied' errors jQuery("<div>").append( jQuery.parseHTML( responseText ) ).find( selector ) : // Otherwise use the full result responseText ); }).complete( callback && function( jqXHR, status ) { self.each( callback, response || [ jqXHR.responseText, status, jqXHR ] ); });

self.html() 是使用瀏覽器的 .innerHTML 屬性來解析被取回的文檔，並把它插入當前文檔。