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

時間 2020-09-14

標籤 jquery document ready window.onload window onload 區別欄目 JQuery 简体版

原文原文鏈接

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(){});javascript

在我之前的開發中，通常用到javascript，我都是採用jquery的模式，也就是大多數時候，第一行寫的是：html

代碼以下:

 
 $(document).ready(function(){ 
 
 ... 
 
 });

這個時候，不必定要等全部的js和圖片加載完畢，就能夠執行一些方法，不過有些時候，必需要等全部的java

元素都加載完畢，才能夠執行一些方法的時候，好比說，部分圖片或者什麼其餘方面尚未加載好，這個時候，點擊某些按鈕，會致使出現意外的狀況，這個時候，就jquery

須要用到:瀏覽器

代碼以下:

 
 $(window).load(function() { 
 
 $("#btn-upload").click(function(){   //好比說： 
 
  uploadPhotos(); 
 
 }); 
 
 });

下面是轉載的內容，
用$(window).load(function(){...})而不用body.onload()的幾個理由
首先它們都是在頁面全部元素(包括html標籤以及引用到得全部圖片,Flash等媒體)加載完畢後執行的,這是它們的共同點.框架

不用body.Onload()理由1：dom

若是咱們想同時加載多個函數,咱們必須這樣寫函數

<body onload="fn1(),fn2()"></body>看起來極其醜陋,若是用$(window).load()咱們能夠這樣加載多個函數測試

複製代碼代碼以下:

 
  $(window).load(function() { 
 
             alert("hello,我是jQuery!"); 
 
   }); 
 
  $(window).load(function() { 
 
         alert("hello,我也是jQuery"); 
 
  });

這樣寫它會從上往下執行這兩個函數,而且看起來漂亮多了.spa

不用body.Onload()理由2：

用body.Onload()不可以作到js和html徹底分離,這是一個很嚴重的問題.

另外用$(window).load(function(){...})和body.onload()都存在一樣一個問題,由於開始也說到了,它們都須要等到頁面的全部內容

加載完畢才執行,可是若是當網速比較慢的時候,加載一個頁面每每須要較長的時間(幾秒到十幾秒不等,甚至更長...),因此咱們常常

會遇到頁面尚未徹底加載完畢而用戶已經在操做頁面了這種狀況,這樣頁面表現出來的效果就跟咱們預期的效果不同了,

因此在這裏我推薦使用$(document).ready(function(){}),或簡寫爲$(function(){})，由於他會在頁面的dom元素加載完畢後就執行,

而無需等到圖片或其餘媒體下載完畢.

可是有時候確實咱們有須要等到頁面的全部東西都加載完後再執行咱們想執行的函數,因此是該使用$(window).load(function(){...})仍是

該使用$(function(){})每每須要結合具體須要而做不一樣的選擇.

最後附上一段在全部DOM元素加載以前執行的jQuery代碼

代碼以下:

 
 <script type="text/javascript"> 
 
 (function() { 
 
             alert("DOM還沒加載哦!"); 
 
         })(jQuery) 
 
   </script>

呵呵,有時候咱們也有這個需求!

以瀏覽器裝載文檔爲例，在頁面加載完畢後，瀏覽器會經過 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綁定的方法執行以後才輪到。而這個頁面中正好在測試環境下有一個訪問不到的資源，那十幾秒的延遲正是它放大出的時間差。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。