DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> jquery的$(document).ready()和onload的加載順序
jquery的$(document).ready()和onload的加載順序
編輯:關於JavaScript     
最近在改一個嵌入在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;
    }
   // and execute any waiting functions
   jQuery.ready();
})();
jQuery.event.add( window, "load", jQuery.ready );

結果很明了了,IE只有在頁面不是嵌入frame中的情況下才和Firefox等一樣,先執行$(document).ready()的內容,再執行原來的onload方法。對於嵌入frame中的頁面,也只是綁定在load事件上執行,所以自然是在原來的onload綁定的方法執行之後才輪到。而這個頁面中正好在測試環境下有一個訪問不到的資源,那十幾秒的延遲正是它放大出的時間差。

作者:Joyce Liu
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved