最近在改一個嵌入在frame中的頁面的時候,使用了jquery作效果,而頁面自己也綁定了onload事件。
改完後,Firefox下測試正常流暢,IE下就要等個十幾秒jquery的效果纔出現,黃花菜都涼了。
最近在改一個嵌入在frame中的頁面的時候,使用了jquery作效果,而頁面自己也綁定了onload事件。改完後,Firefox下測試正常流暢,IE下就要等個十幾秒jquery的效果纔出現,黃花菜都涼了。
起初覺得是和自己onload加載的方法衝突。網上廣泛的說法是$(document).ready()是在頁面DOM解析完成後執行,而onload事件是在全部資源都準備完成以後才執行,也就是說$(document).ready()是要在onload以前執行的,尤爲當頁面圖片較大較多的時候,這個時間差可能更大。但是我這頁面分明是圖片都顯示出來十幾秒了,還不見jquery的效果出來。
刪了onload加載的方法試試,結果仍是同樣,看來沒有必要把本來的onload事件綁定也改用$(document).ready()來寫。那是什麼緣由使得Firefox正常而IE就能呢?接着調試,發現IE下原來綁定的onload方法居然先於$(document).ready()的內容執行,而Firefox則是先執行$(document).ready()的內容,再執行原來的onload方法。這個和網上的說法彷佛不徹底一致啊,呵呵,有點意思,好像愈來愈接近真相了。
翻翻jquery的源碼看看$(document).ready()是如何實現的吧:
if ( jQuery.browser.msie && window == top ) (function(){
if (jQuery.isReady) return;
try {
document.documentElement.doScroll("left");
} catch( error ) {
setTimeout( arguments.callee, 0 );
return;
} www.jbxue.com
// and execute any waiting functions
jQuery.ready();
})();
jQuery.event.add( window, "load", jQuery.ready );
結果很明瞭了,IE只有在頁面不是嵌入frame中的狀況下才和Firefox等同樣,先執行$(document).ready()的內容,再執行原來的onload方法。對於嵌入frame中的頁面,也只是綁定在load事件上執行,因此天然是在原來的onload綁定的方法執行以後才輪到。而這個頁面中正好在測試環境下有一個訪問不到的資源,那十幾秒的延遲正是它放大出的時間差。