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

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

代碼如下:
$(document).ready(function(){
...
});

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

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

需要用到:

代碼如下:
$(window).load(function() {
$("#btn-upload").click(function(){ //比如說：
uploadPhotos();
});
});

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

不用body.Onload()理由1：

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

看起來極其丑陋,如果用$(window).load()我們可以這樣加載多個函數(shù)

代碼如下:
$(window).load(function() {
alert("hello,我是jQuery!");
});
$(window).load(function() {
alert("hello,我也是jQuery");
});

這樣寫它會從上往下執(zhí)行這兩個函數(shù),并且看起來漂亮多了.

不用body.Onload()理由2：

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

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

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

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

所以在這里我推薦使用$(document).ready(function(){}),或簡寫為$(function(){})，因?yàn)樗麜陧撁娴膁om元素加載完畢后就執(zhí)行,

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

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

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

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

代碼如下:
輸出第二個 能同時編寫多個
以下代碼正確執(zhí)行：

結(jié)果兩次都輸出
簡化寫法 無

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

——————————————————————————————

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

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

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

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

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

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com