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

劉水鏡發表於2015-01-31
JS

我們繼續說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()的區別已經很明顯了，什麼情況下用誰也不用我多說了吧！



相關文章