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í)行，也就是說$(document).ready()是要在onload之前執(zhí)行的，尤其當頁面圖片較大較多的時候，這個時間差可能更大?？墒俏疫@頁面分明是圖片都顯示出來十幾秒了，還不見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

您可能感興趣的文章: