国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 語言 > JavaScript > 正文

jquery $(document).ready() 與window.onload的區別

2024-05-06 16:01:36
字體:
來源:轉載
供稿:網友
Jquery中$(document).ready()的作用類似于傳統JavaScript中的window.onload方法,不過與window.onload方法還是有區別的。

1.執行時間 

        window.onload必須等到頁面內包括圖片的所有元素加載完畢后才能執行。
        $(document).ready()是DOM結構繪制完畢后就執行,不必等到加載完畢。 

2.編寫個數不同

         window.onload不能同時編寫多個,如果有多個window.onload方法,只會執行一個
         $(document).ready()可以同時編寫多個,并且都可以得到執行

3.簡化寫法

         window.onload沒有簡化寫法
         $(document).ready(function(){})可以簡寫成$(function(){});


jquery $(document).ready() 與window.onload的區別

 以 瀏覽器裝載文檔為例,在頁面加載完畢后,瀏覽器會通過 Javascript 為 DOM 元素添加事件。在常規的 Javascript 代碼中,通常使用 window.onload 方法,而在 Jquery 中,使用的是 $(document).ready() 方法。 $(document).ready() 方法是事件模塊中最重要一個函數,可以極大的提高 Web 應用程序的速度。

   window.load  $(document).ready() 
執行時機  必須等待網頁中所有的內容加載完畢后 ( 包括圖片 ) 才能執行  網頁中所有 DOM 結構繪制完畢后就執行,可以能 DOM 元素關聯的內容并沒有加載完 
編寫個數  不能同時編寫多個
以下代碼無法正確執行:
window.onload = function(){
   alert(“text1”);
};
window.onload = function(){
   alert(“text2”);
};
結果只輸出第二個  能同時編寫多個
以下代碼正確執行:
$(document).ready(function(){
   alert(“Hello World”);
});
$(document).ready(function(){
   alert(“Hello again”);
});
結果兩次都輸出 
簡化寫法  無  $(function(){
   // do something
}); 

另外,需要注意一點,由于在 $(document).ready() 方法內注冊的事件,只要 DOM 就緒就會被執行,因此可能此時元素的關聯文件未下載完。例如與圖片有關的 html 下載完畢,并且已經解析為 DOM 樹了,但很有可能圖片還沒有加載完畢,所以例如圖片的高度和寬度這樣的屬性此時不一定有效。要解決這個問題,可以使用 Jquery 中另一個關于頁面加載的方法 ---load() 方法。 Load() 方法會在元素的 onload 事件中綁定一個處理函數。如果處理函數綁定給 window 對象,則會在所有內容 ( 包括窗口、框架、對象和圖像等 ) 加載完畢后觸發,如果處理函數綁定在元素上,則會在元素的內容加載完畢后觸發。
Jquery 代碼如下:
$(window).load(function (){
       // 編寫代碼 
});等價于 JavaScript 中的以下代碼
Window.onload = function (){
     // 編寫代碼
}

——————————————————————————————

最近在改一個嵌入在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綁定的方法執行之后才輪到。而這個頁面中正好在測試環境下有一個訪問不到的資源,那十幾秒的延遲正是它放大出的時間差。

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表

圖片精選

主站蜘蛛池模板: 长治市| 新平| 子洲县| 沈阳市| 天峨县| 萨迦县| 隆安县| 大化| 龙口市| 洪雅县| 镇原县| 石景山区| 青冈县| 闽清县| 蒙城县| 泰州市| 深泽县| 曲松县| 日土县| 房产| 黎平县| 镶黄旗| 江永县| 海原县| 丹巴县| 禄丰县| 丹寨县| 桑植县| 青神县| 建湖县| 江陵县| 安远县| 壶关县| 福清市| 礼泉县| 枣强县| 辉南县| 靖江市| 治多县| 屯昌县| 永平县|