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

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

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

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

ready與load誰先執行promise

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

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

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

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

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

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

$(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 屬性來解析被取回的文檔,並把它插入當前文檔。

相關文章
相關標籤/搜索