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