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)文章

uniapp項(xiàng)目引入?js文件以及全局使用方法
這篇文章主要給大家介紹了關(guān)于uniapp項(xiàng)目引入?js文件以及全局使用方法的相關(guān)資料,在Uniapp中引入JS文件是一項(xiàng)常見的操作,文中通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下
2023-12-12 
kindeditor編輯器點(diǎn)中圖片滾動(dòng)條往上頂?shù)腷ug
這篇文章主要介紹了kindeditor編輯器點(diǎn)中圖片滾動(dòng)條往上頂?shù)腷ug的相關(guān)資料,需要的朋友可以參考下
2015-07-07 
JavaScript?中如何攔截全局?Fetch?API?的請(qǐng)求和響應(yīng)問題
在本文中,我們介紹了什么是 JavaScript 攔截器,學(xué)習(xí)了如何通過給 Fetch API 使用猴子補(bǔ)丁和使用 fetch-intercept 庫來創(chuàng)建攔截器,對(duì)js攔截全局Fetch?API的請(qǐng)求和響應(yīng)知識(shí)感興趣的朋友跟隨小編一起看看吧
2023-01-01 
javascript字母大小寫轉(zhuǎn)換的4個(gè)函數(shù)詳解
這篇文章主要介紹了javascript字母大小寫轉(zhuǎn)換的4個(gè)函數(shù)詳解,需要的朋友可以參考下
2014-05-05 
JavaScript資源預(yù)加載組件和滑屏組件的使用推薦
這篇文章主要介紹了JavaScript資源預(yù)加載組件和滑屏組件的使用推薦,分別為preload和slide的用法講解,使用起來非常簡單,需要的朋友可以參考下
2016-03-03 
javascript 正則表達(dá)式相關(guān)應(yīng)介紹
javascript 中幾個(gè)與正則表達(dá)式相關(guān)的應(yīng)用,本文將詳細(xì)介紹,需要的朋友可以參考下
2012-11-11