jquery的$(document).ready()和onload的加載順序
更新時間：2010年05月26日 21:49:42 作者：
最近在改一個嵌入在frame中的頁面的時候，使用了jquery做效果，而頁面本身也綁定了onload事件。改完后，F(xiàn)irefox下測試正常流暢，IE下就要等個十幾秒jquery的效果才出現(xiàn)，黃花菜都涼了。
最近在改一個嵌入在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)上的說法似乎不完全一致啊，呵呵，有點意思，好像越來越接近真相了。
翻翻jquery的源碼看看$(document).ready()是如何實現(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只有在頁面不是嵌入frame中的情況下才和Firefox等一樣，先執(zhí)行$(document).ready()的內(nèi)容，再執(zhí)行原來的onload方法。對于嵌入frame中的頁面，也只是綁定在load事件上執(zhí)行，所以自然是在原來的onload綁定的方法執(zhí)行之后才輪到。而這個頁面中正好在測試環(huán)境下有一個訪問不到的資源，那十幾秒的延遲正是它放大出的時間差。
作者：Joyce Liu
起初以為是和本身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)上的說法似乎不完全一致啊，呵呵，有點意思，好像越來越接近真相了。
翻翻jquery的源碼看看$(document).ready()是如何實現(xiàn)的吧：
復(fù)制代碼 代碼如下:
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只有在頁面不是嵌入frame中的情況下才和Firefox等一樣，先執(zhí)行$(document).ready()的內(nèi)容，再執(zhí)行原來的onload方法。對于嵌入frame中的頁面，也只是綁定在load事件上執(zhí)行，所以自然是在原來的onload綁定的方法執(zhí)行之后才輪到。而這個頁面中正好在測試環(huán)境下有一個訪問不到的資源，那十幾秒的延遲正是它放大出的時間差。
作者：Joyce Liu
您可能感興趣的文章:
- jquery $(document).ready() 與window.onload的區(qū)別
- JQuery onload、ready概念介紹及使用方法
- jquery中的$(document).ready()與window.onload的區(qū)別
- 解析頁面加載與js函數(shù)的執(zhí)行 onload or ready
- 一張表格告訴你windows.onload()與$(document).ready()的區(qū)別
- JQuery的ready函數(shù)與JS的onload的區(qū)別詳解
- 淺析document.ready和window.onload的區(qū)別講解
- jQuery中document與window以及l(fā)oad與ready 區(qū)別詳解
- JQ中$(window).load和$(document).ready區(qū)別與執(zhí)行順序
相關(guān)文章
這篇文章主要為大家介紹了前端進階之IntersectionObserver示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04
這篇文章主要為大家詳細介紹了js實現(xiàn)秒表計時器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-12-12
用js有很久了,但都沒有深究過js的數(shù)組形式,下面這篇文章主要給大家介紹了關(guān)于JS數(shù)組在內(nèi)存中的效率問題,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-02-02
閉包的一個通常的用法是為一個在某一函數(shù)執(zhí)行前先執(zhí)行的函數(shù)提供參數(shù)。例如，在web環(huán)境中，一個函數(shù)作為setTimeout函數(shù)調(diào)用的第一個參數(shù)，是一種很常見的應(yīng)用2017-04-04
echarts圖形x、y坐標(biāo)文字設(shè)置間隔顯示及相關(guān)問題詳解
最近在做一個web的數(shù)據(jù)統(tǒng)計部分用到了Echart,下面這篇文章主要給大家介紹了關(guān)于echarts圖形x、y坐標(biāo)文字設(shè)置間隔顯示及相關(guān)問題的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-08-08
對于訂單，想必大家并不陌生吧，下為大家介紹下使用js實現(xiàn)的訂單，感興趣的朋友可以參考下2013-12-12
js 實現(xiàn)數(shù)值的千分位及保存小數(shù)方法(推薦)
下面小編就為大家?guī)硪黄猨s 實現(xiàn)數(shù)值的千分位及保存小數(shù)方法(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
JavaScript中的字符串與數(shù)字轉(zhuǎn)換的示例
在JavaScript編程中,掌握字符串與數(shù)字的轉(zhuǎn)換技巧對處理用戶輸入、數(shù)據(jù)計算及格式化輸出至關(guān)重要,本文詳細介紹了多種轉(zhuǎn)換方法,下面就一起來介紹一下2024-09-09
javascript css在IE和Firefox中區(qū)別分析
我們討論的主題CSS網(wǎng)頁布局，最令大家頭疼的問題就是瀏覽器兼容性，雖然52CSS.com介紹過很多這方向的知識，但依然讓很多開發(fā)人員暈頭轉(zhuǎn)向，今天的這篇文章，將列出css和javascript在IE和Firefox中二十三個不同點，希望對大家的學(xué)習(xí)有所幫助。2009-02-02
javascript之Partial Application學(xué)習(xí)
在數(shù)學(xué)中，一個函數(shù)是描述每個輸入值對應(yīng)唯一輸出值的這種對應(yīng)關(guān)系，符號為 f(x)。例如，表達式 f(x)=x2表示了一個函數(shù) f，其中每個輸入值x都與唯一輸出值x2相聯(lián)系2013-01-01