菜鳥學JS（五）——window.onload與$(document).ready()

咱們繼續說JS，咱們經常在頁面加載完成之後作一些操做，好比一些元素的顯示與隱藏、一些動畫效果。咱們一般有兩種方法來完成這個事情，一個就是window.onload事件，另外一個就是JQuery的ready()方法。那麼這 兩種方法有什麼區別呢？往下看：

onload事件，是在頁面中全部元素以及內容所有加載完成之後觸發的；而ready()方法，則是在頁面的DOM結構加載完畢之後就被觸發了。也就是說ready()方法會在onload事件以前執行。

舉一個例子：

假設有一個表現圖庫的頁面，這種頁面中可能會包含許多大型圖像，咱們能夠經過jQuery隱藏、顯示或以其餘方式操做這些圖像。若是咱們經過onload頁面設置界面，那麼用戶在可以使用這個頁面以前，必需要等到每一幅圖像都下載完成。更糟糕的是，若是行爲稍微添加給哪些具備默認行爲的元素(好比連接)，那麼用戶的交互可能會致使意想不到的結果。然而當咱們試用$(document).ready(){ }進行設置時，這個界面就會更早地準備好可用的正確行爲。

使用$(document).ready(){ }通常來講都要優於試用onload事件處理程序，但必需要明確一點的是，由於支持文件可能尚未家在完成，因此相似圖像的高度和寬度這樣的屬性此時不必定有效。

onload事件一般寫成以下形式：

function myfunction() {
    
    //your code
    
};

window.onload = myfunction;

或者：

window.onload = function(){
    
　　//your code

};

ready()方法一般以下：

$(document).ready(function(){

    //your code
    
});

或者：

$().ready(function(){
    
    //your code
    
});

再或者：

$(function(){
    
    //your code
    
});

 

接下來再看兩個例子：

function first(){
    
    alert("first");
    
}

function second(){
    
    alert("second");
    
}

window.onload = second;
window.onload = first; 

 

這段代碼會彈出「first」。

 

function first(){
    
    alert("first");
    
}

function second(){
    
    alert("second");
    
}

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

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

 

上面這段代碼會分別彈出「first」和「second」。

爲何會這樣呢？由於onload是一個事件，它只能綁定一個值，後面的會覆蓋前面的；而ready()是一個方法，方法之間不會互相影響，因此會順序執行。

OK，作了以上對比，onload和ready()的區別已經很明顯了，什麼狀況下用誰也不用我多說了吧！