1、js方法:
2、jQuery方法:(需要引用jQuery文件支持)
或者可以簡寫爲
當dom加載完就可以執行(比window.onload更早)。在同一個頁面裏可以多次出現.ready()
PS:兩者的主要區別
window.onload:
當一個文檔完全下載到瀏覽器中時,纔會觸發window.onload事件。這意味着頁面上的全部元素對js而言都是可以操作的,也就是說頁面上的所有元素加載完畢纔會執行。這種情況對編寫功能性代碼非常有利,因爲無需考慮加載的次序。
$(document).ready{ }:
會在DOM完全就緒並可以使用時調用。雖然這也意味着所有元素對腳本而言都是可以訪問的,但是,並不意味着所有關聯的文件都已經下載完畢。換句話說,當HMTL下載完成並解析爲DOM樹之後,代碼就會執行。
舉一個例子:
假設有一個表現圖庫的頁面,這種頁面中可能會包含許多大型圖像,我們可以通過jQuery隱藏、顯示或以其他方式操作這些圖像。如果我們通過onload頁面設置界面,那麼用戶在能夠使用這個頁面之前,必須要等到每一幅圖像都下載完成。更糟糕的是,如果行爲稍微添加給哪些具有默認行爲的元素(比如鏈接),那麼用戶的交互可能會導致意想不到的結果。然而當我們試用$(document).ready(){ }進行設置時,這個界面就會更早地準備好可用的正確行爲。
使用$(document).ready(){ }一般來說都要優於試用onload事件處理程序,但必須要明確一點的是,因爲支持文件可能還沒有家在完成,所以類似圖像的高度和寬度這樣的屬性此時不一定有效。
注:用把js放在頁面底部的方法以及運用defer=“defer” 的方法都是會出現問題的。最好使用上面的window.onload函數!
window.onload綁定多個函數
當一個HTML頁面中加載了兩個window.οnlοad=function(){}函數時,頁面只會執行第二個window.onload裏面的內容,如果需要同時綁定多個事件,該如何處理呢?
方案一:
創建一個匿名函數,來容納需要綁定的多個事件,再講這個匿名函數綁定到onload事件上
window.onload = function(){
firstFunction();
secondFunction();
…
}
方案二:
function addEventLoad(func){
var oldOnload = window.onload;
if(typeof window.onload!=‘function’){
window.onload = func;
}else{
window.onload = function(){
oldOnload();
func();
}
}
}
將現有的window.onload事件處理函數的值存入變量oldOnload:
如果這個處理函數上還沒有綁定函數,則把新函數綁定給它;
如果已經綁定了函數,則把新的函數追加到指令的末尾。
調用方法:
addEventLoad(firstFuction);
addEventLoad(secondFuction);