jquery 的ready() 與window.onload()的區別

作web開發時經常使用Jquery中$(document).ready()和JavaScript中的window.onload方法，二者都是要在頁面加載完成之後加載的方法，可是這二者仍是有很大區別的。最近遇到了這樣的問題，查詢了多篇文章，作一下總結。

簡單來講，要以用如下張表來表示 ：

Jquery的ready()與Javascrpit的load()

	window.onload()	$(document).ready()
加載時機	必須等待網頁所有加載完畢（包括圖片等），而後再執行JS代碼	只須要等待網頁中的DOM結構加載完畢，就能執行JS代碼
執行次數	只能執行一次，若是第二次，那麼第一次的執行會被覆蓋	能夠執行屢次，第N次都不會被上一次覆蓋
舉例	如下代碼沒法正確執行：   window.onload = function() { alert(「text1」);}; window.onload = function() { alert(「text2」);};  結果只輸出第二個	如下代碼正確執行：  $(document).ready(function(){alert(「Hello」)}); $(document).ready(function(){alert(「Hello」)}); 結果兩次都輸出
簡寫方案	無	$(function () {})

 通常狀況下window的load()都是用來設置body標籤的onload事件.但onload事件是要在頁面的元素所有加載完了才觸發的,這也包括頁面上的圖片，以及大的表格數據。若是頁面上圖片較多或圖片太大,加載須要較多時間，就會致使頁面無響應，或者用戶作了其它操做了。

而Jeuery中的ready()則是在頁面的dom(節點)加載完後就能夠作相應的操做,而不用等待所有元素加載完成.好比只知道頁面某處有一張圖片，而不必定要等它顯示出來就能夠爲它綁定點擊方法。

 

load()通常不建議使用，這裏主要講一下( $(selector).ready())。

原理:
在jquery腳本加載的時候,會設置一個isReady的標記,監聽DOMContentLoaded事件(這個不是什麼瀏覽器都有的,不一樣瀏覽器,jquery運做方式不同).固然遇到調用ready函數的時候,若是isReady未被設置,那就是說頁面未加載完,就會把要執行的函數用一個數組緩存起來,當頁面加載完後,再把緩存的函數一一執行.
Jquery中的詳細代碼分析:

 

ready: function(fn) {
// 綁定監聽器
bindReady();
// 若是 DOM 加載完成
if ( jQuery.isReady )
// 立刻運行此函數
fn.call( document, jQuery );
// 不然保存起來
else
// 把函數加入緩存數組中
jQuery.readyList.push( function() { return fn.call(this, jQuery); } );
return this;
}

固然，jquery對不一樣的瀏覽器dom加載完成的通知 bindReady()函數也是不一樣的

var readyBound = false;
function bindReady(){
if ( readyBound ) return;
readyBound = true;

// Mozilla,opera,webkitnightlies支持DOMContentLoaded事件
if ( document.addEventListener && !jQuery.browser.opera)
// 直接使用事件回調便可
document.addEventListener( "DOMContentLoaded", jQuery.ready, false );

// 若是是ie而且不是嵌在frame中
// 就須要不斷地檢查文檔是否加載完
if ( jQuery.browser.msie && window == top ) (function(){
if (jQuery.isReady) return;
try {

document.documentElement.doScroll("left");
} catch( error ) {

setTimeout( arguments.callee, 0 );
return;
}
// and execute any waiting functions
jQuery.ready();
})();

if ( jQuery.browser.opera )
document.addEventListener( "DOMContentLoaded", function () {
if (jQuery.isReady) return;
for (var i = 0; i < document.styleSheets.length; i++) 
if (document.styleSheets[i].disabled) {
setTimeout( arguments.callee, 0 );
return;
}
// and execute any waiting functions
jQuery.ready();
}, false);

if ( jQuery.browser.safari ) {
var numStyles;
(function(){
if (jQuery.isReady) return;
if ( document.readyState != "loaded" && document.readyState != "complete" ) { 
setTimeout( arguments.callee, 0 );
return;
}
if ( numStyles === undefined )
numStyles = jQuery("style, link[rel=stylesheet]").length;
if ( document.styleSheets.length != numStyles ) { 
setTimeout( arguments.callee, 0 );
return;
}
// and execute any waiting functions
jQuery.ready();
})();
}

// A fallback to window.onload, that will always work
jQuery.event.add( window, "load", jQuery.ready ); 
}
}

 

這裏最要注意的是，IE只有在頁面不是嵌入frame中的狀況下才和其它瀏覽器等同樣，在DOM加載完成之後就執行$(document).ready()的內容。

參考文章：一、http://www.cnblogs.com/kingwell/archive/2012/09/09/2677252.html

              二、http://blog.csdn.net/xiebaochun/article/details/36375481