$(document).ready和window.onload、$(window).load(function (){})的區別

$(document).ready:是DOM結構繪製完畢後就執行,沒必要等到加載完畢。 意思就是DOM樹加載完畢,就執行,沒必要等到頁面中圖片或其餘外部文件都加載完畢。而且能夠寫多個.ready。css

window.onload:是頁面全部元素都加載完畢,包括圖片等全部元素。只能執行一次。 因此,$(document).ready的執行時間要早於window.onload。而且能夠寫多個,看代碼:框架

//如下代碼沒法正確執行: 
window.onload = function()
{ 
alert(「text1」); 
}; 
window.onload = function()
{ 
alert(「text2」); 
}; 
//結果只輸出第二個 能同時編寫多個 
//如下代碼正確執行: 
$(document).ready(function()
{ 
alert(「Hello World」); 
}); 
$(document).ready(function()
{ 
alert(「Hello again」); 
}); 
//結果兩次都輸出

若是須要獲取DOM綁定元素的屬性值時,最好使用window.onload,由於他是在全部元素加載完畢才執行,若是使用$(document).ready,DOM已經加載,可是DOM綁定的元素屬性沒有加載,因此屬性不生效。要解決這個問題,可使用 Jquery 中另外一個關於頁面加載的方法 ---load() 方法。 Load() 方法會在元素的 onload 事件中綁定一個處理函數。若是處理函數綁定給 window 對象,則會在全部內容 ( 包括窗口、框架、對象和圖像等 ) 加載完畢後觸發,若是處理函數綁定在元素上,則會在元素的內容加載完畢後觸發。函數

//Jquery 代碼以下: 
$(window).load(function ()
{ 

});
//等價於 JavaScript 中的如下代碼 
Window.onload = function ()
{
 
}

總結:code

  1. window.onload=function(){}是等待全部的內容都加載完以後執行,好比圖片,內容,js,css等。對象

  2. $(function(){}),是等待DOM加載完以後執行(個人理解是標籤繪製完畢以後),圖片未加載完時也能執行。事件

  3. $(function(){})是$(document).ready(function(){})的簡寫方式,功能是同樣的。圖片

  4. $(window).load(function (){})也是等待全部的內容都加載完以後執行。ip

  5. 無論是外鏈js仍是頁面中的js的window.onload都只執行最後的一個io

  6. $(window).load(function (){})能夠有多個,並且都是順序執行。function

相關文章
相關標籤/搜索