jQuery-ready與load

 

// ready 在DOM加載完成時運行的代碼

$(document).ready(function(){
    // 在這裏寫代碼...
})

// 能夠簡寫爲

$(function(){
    // 在這裏繼續使用$做爲別名...
})

 

// load 頁面加載完畢後運行代碼

$(document).load(function(){
    // 在這裏寫你的代碼...
})

 

區別一：ready 會先於 load 執行

　　瞭解瀏覽器加載頁面的過程

　　　　一、 解析HTML結構，對html文檔進行加載

　　　　二、 加載外部表文件，包含css樣式和javascript腳本，而且執行

　　　　三、 html執行完畢

　　　　四、 加載圖片、字體等外部文件

　　　　五、頁面加載完成

 

　　ready：是在DOM元素加載完成就執行，也就是說在上面的步驟3執行完成後就執行，不須要等待圖片、字體等外部文件的加載

　　load：是在頁面加載完成後才執行，在上面步驟5完成後才執行。

　　因此按照瀏覽器的加載頁面步驟來講，ready 會比 load先執行

 

區別二：load 只能編寫一個，ready能夠編寫多個

load編寫：

$(document).load(function(){
    alert("load1...");
});
$(document).load(function(){
    alert("load2...");
});

執行後只輸出了 load2...

由於他只能執行一個，若是有多個的狀況，後面的會覆蓋前面的

 

ready編寫：

$(document).ready(function(){
    alert("ready1...");
});
$(document).ready(function(){
    alert("ready2...");
});

執行後兩次都輸出：ready1...

　　　　　　　　　　ready2...

 

區別三：ready 有簡寫，而load沒有

ready簡寫：

$(function(){
    // ready簡寫，在這擼代碼
})