快捷導(dǎo)航

jquery $(document).ready() 與window.onload的區(qū)別

更新時(shí)間：2009年12月28日 00:00:07 投稿：mdxy-dxy

Jquery中$(document).ready()的作用類(lèi)似于傳統(tǒng)JavaScript中的window.onload方法，不過(guò)與window.onload方法還是有區(qū)別的。

1.執(zhí)行時(shí)間

window.onload必須等到頁(yè)面內(nèi)包括圖片的所有元素加載完畢后才能執(zhí)行。
$(document).ready()是DOM結(jié)構(gòu)繪制完畢后就執(zhí)行，不必等到加載完畢。

2.編寫(xiě)個(gè)數(shù)不同

window.onload不能同時(shí)編寫(xiě)多個(gè)，如果有多個(gè)window.onload方法，只會(huì)執(zhí)行一個(gè)
$(document).ready()可以同時(shí)編寫(xiě)多個(gè)，并且都可以得到執(zhí)行

3.簡(jiǎn)化寫(xiě)法

window.onload沒(méi)有簡(jiǎn)化寫(xiě)法
$(document).ready(function(){})可以簡(jiǎn)寫(xiě)成$(function(){});

$(document).ready(function(){
  // 執(zhí)行代碼
});
或者
$(function(){
  // 執(zhí)行代碼
});

在我以前的開(kāi)發(fā)中，一般用到j(luò)avascript，我都是采用jquery的模式，也就是大多數(shù)時(shí)候，第一行寫(xiě)的是：

$(document).ready(function(){
...
});

這個(gè)時(shí)候，不一定要等所有的js和圖片加載完畢，就可以執(zhí)行一些方法，不過(guò)有些時(shí)候，必須要等所有的

元素都加載完畢，才可以執(zhí)行一些方法的時(shí)候，比如說(shuō)，部分圖片或者什么其他方面還沒(méi)有加載好，這個(gè)時(shí)候，點(diǎn)擊某些按鈕，會(huì)導(dǎo)致出現(xiàn)意外的情況，這個(gè)時(shí)候，就

需要用到:

$(window).load(function () 
{
  $("#btn-upload").click(function ()
  {
    //比如說(shuō)：
    uploadPhotos();
  });
});

下面是轉(zhuǎn)載的內(nèi)容，

用$(window).load(function(){...})而不用body.onload()的幾個(gè)理由
首先它們都是在頁(yè)面所有元素(包括html標(biāo)簽以及引用到得所有圖片,Flash等媒體)加載完畢后執(zhí)行的,這是它們的共同點(diǎn).

不用body.Onload()理由1：

如果我們想同時(shí)加載多個(gè)函數(shù),我們必須這樣寫(xiě)

<body onload="fn1(),fn2()"></body>看起來(lái)極其丑陋,如果用$(window).load()我們可以這樣加載多個(gè)函數(shù)

$(window).load(function () 
{
  alert("hello,我是jQuery!");
});
$(window).load(function () 
{
  alert("hello,我也是jQuery");
});

這樣寫(xiě)它會(huì)從上往下執(zhí)行這兩個(gè)函數(shù),并且看起來(lái)漂亮多了.

不用body.Onload()理由2：

用body.Onload()不能夠做到j(luò)s和html完全分離,這是一個(gè)很?chē)?yán)重的問(wèn)題.

另外用$(window).load(function(){...})和body.onload()都存在同樣一個(gè)問(wèn)題,因?yàn)殚_(kāi)始也說(shuō)到了,它們都需要等到頁(yè)面的所有內(nèi)容

加載完畢才執(zhí)行,但是如果當(dāng)網(wǎng)速比較慢的時(shí)候,加載一個(gè)頁(yè)面往往需要較長(zhǎng)的時(shí)間(幾秒到十幾秒不等,甚至更長(zhǎng)...),所以我們經(jīng)常

會(huì)遇到頁(yè)面還沒(méi)有完全加載完畢而用戶(hù)已經(jīng)在操作頁(yè)面了這種情況,這樣頁(yè)面表現(xiàn)出來(lái)的效果就跟我們預(yù)期的效果不一樣了,

所以在這里我推薦使用$(document).ready(function(){}),或簡(jiǎn)寫(xiě)為$(function(){})，因?yàn)樗麜?huì)在頁(yè)面的dom元素加載完畢后就執(zhí)行,

而無(wú)需等到圖片或其他媒體下載完畢.

但是有時(shí)候確實(shí)我們有需要等到頁(yè)面的所有東西都加載完后再執(zhí)行我們想執(zhí)行的函數(shù),所以是該使用$(window).load(function(){...})還是

該使用$(function(){})往往需要結(jié)合具體需要而作不同的選擇.

最后附上一段在所有DOM元素加載之前執(zhí)行的jQuery代碼

<script type="text/javascript">
(function() {
      alert("DOM還沒(méi)加載哦!");
    })(jQuery)
 </script>

呵呵,有時(shí)候我們也有這個(gè)需求!

以瀏覽器裝載文檔為例，在頁(yè)面加載完畢后，瀏覽器會(huì)通過(guò) Javascript 為 DOM 元素添加事件。在常規(guī)的 Javascript 代碼中，通常使用 window.onload 方法，而在 Jquery 中，使用的是 $(document).ready() 方法。 $(document).ready() 方法是事件模塊中最重要一個(gè)函數(shù)，可以極大的提高 Web 應(yīng)用程序的速度。

window.load $(document).ready()

執(zhí)行時(shí)機(jī) 必須等待網(wǎng)頁(yè)中所有的內(nèi)容加載完畢后 ( 包括圖片 ) 才能執(zhí)行網(wǎng)頁(yè)中所有 DOM 結(jié)構(gòu)繪制完畢后就執(zhí)行，可以能 DOM 元素關(guān)聯(lián)的內(nèi)容并沒(méi)有加載完
編寫(xiě)個(gè)數(shù) 不能同時(shí)編寫(xiě)多個(gè)
以下代碼無(wú)法正確執(zhí)行：

window.onload = function(){ 
 alert(“text1”); 
}; 
window.onload = function(){ 
 alert(“text2”); 
};

結(jié)果只輸出第二個(gè) 能同時(shí)編寫(xiě)多個(gè)
以下代碼正確執(zhí)行：

$(document).ready(function(){ 
 alert(“Hello World”); 
}); 
$(document).ready(function(){ 
 alert(“Hello again”); 
});

結(jié)果兩次都輸出
簡(jiǎn)化寫(xiě)法無(wú)

 $(function(){ 
 // do something 
});

另外，需要注意一點(diǎn)，由于在 $(document).ready() 方法內(nèi)注冊(cè)的事件，只要 DOM 就緒就會(huì)被執(zhí)行，因此可能此時(shí)元素的關(guān)聯(lián)文件未下載完。例如與圖片有關(guān)的 html 下載完畢，并且已經(jīng)解析為 DOM 樹(shù)了，但很有可能圖片還沒(méi)有加載完畢，所以例如圖片的高度和寬度這樣的屬性此時(shí)不一定有效。要解決這個(gè)問(wèn)題，可以使用 Jquery 中另一個(gè)關(guān)于頁(yè)面加載的方法 ---load() 方法。 Load() 方法會(huì)在元素的 onload 事件中綁定一個(gè)處理函數(shù)。如果處理函數(shù)綁定給 window 對(duì)象，則會(huì)在所有內(nèi)容 ( 包括窗口、框架、對(duì)象和圖像等 ) 加載完畢后觸發(fā)，如果處理函數(shù)綁定在元素上，則會(huì)在元素的內(nèi)容加載完畢后觸發(fā)。
Jquery 代碼如下：

$(window).load(function (){ 
    // 編寫(xiě)代碼 
});

等價(jià)于 JavaScript 中的以下代碼

Window.onload = function (){ 
   // 編寫(xiě)代碼 
}

最近在改一個(gè)嵌入在frame中的頁(yè)面的時(shí)候，使用了jquery做效果，而頁(yè)面本身也綁定了onload事件。改完后，F(xiàn)irefox下測(cè)試正常流暢，IE下就要等個(gè)十幾秒jquery的效果才出現(xiàn)，黃花菜都涼了。

　　起初以為是和本身onload加載的方法沖突。網(wǎng)上普遍的說(shuō)法是$(document).ready()是在頁(yè)面DOM解析完成后執(zhí)行，而onload事件是在所有資源都準(zhǔn)備完成之后才執(zhí)行，也就是說(shuō)$(document).ready()是要在onload之前執(zhí)行的，尤其當(dāng)頁(yè)面圖片較大較多的時(shí)候，這個(gè)時(shí)間差可能更大?？墒俏疫@頁(yè)面分明是圖片都顯示出來(lái)十幾秒了，還不見(jiàn)jquery的效果出來(lái)。

　　刪了onload加載的方法試試，結(jié)果還是一樣，看來(lái)沒(méi)有必要把原本的onload事件綁定也改用$(document).ready()來(lái)寫(xiě)。那是什么原因使得Firefox正常而IE就能呢？接著調(diào)試，發(fā)現(xiàn)IE下原來(lái)綁定的onload方法竟然先于$(document).ready()的內(nèi)容執(zhí)行，而Firefox則是先執(zhí)行$(document).ready()的內(nèi)容，再執(zhí)行原來(lái)的onload方法。這個(gè)和網(wǎng)上的說(shuō)法似乎不完全一致啊，呵呵，有點(diǎn)意思，好像越來(lái)越接近真相了。

　　翻翻jquery的源碼看看$(document).ready()是如何實(shí)現(xiàn)的吧：

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(); 
})(); 
jQuery.event.add( window, "load", jQuery.ready );

結(jié)果很明了了，IE只有在頁(yè)面不是嵌入frame中的情況下才和Firefox等一樣，先執(zhí)行$(document).ready()的內(nèi)容，再執(zhí)行原來(lái)的onload方法。對(duì)于嵌入frame中的頁(yè)面，也只是綁定在load事件上執(zhí)行，所以自然是在原來(lái)的onload綁定的方法執(zhí)行之后才輪到。而這個(gè)頁(yè)面中正好在測(cè)試環(huán)境下有一個(gè)訪問(wèn)不到的資源，那十幾秒的延遲正是它放大出的時(shí)間差。

以上就是本文的全部?jī)?nèi)容，了解更多jQuery的語(yǔ)法，大家可以查看：《jQuery 1.10.3 在線手冊(cè)》，也希望大家多多支持腳本之家。

您可能感興趣的文章: