在jQuery中,`load`和`ready`是兩個(gè)不同的事件。
1. `load`事件:
- `load`事件在元素(如圖片、iframe)或整個(gè)頁(yè)面加載完成后觸發(fā)。
- 當(dāng)元素的所有資源(包括圖片、樣式表等)都加載完成后,`load`事件被觸發(fā)。
- 對(duì)于`img`元素,當(dāng)圖片加載完成后,`load`事件會(huì)被觸發(fā)。
- 對(duì)于`iframe`元素,當(dāng)嵌入的文檔加載完成后,`load`事件會(huì)被觸發(fā)。
- 對(duì)于整個(gè)頁(yè)面,當(dāng)所有的資源(包括圖片、樣式表、腳本等)都加載完成后,`load`事件會(huì)被觸發(fā)。
- 示例:
$(window).on('load', function() {
// 頁(yè)面或元素的所有資源加載完成后執(zhí)行的代碼
});
2. `ready`事件:
- `ready`事件在DOM樹(shù)構(gòu)建完成后觸發(fā),即HTML文檔結(jié)構(gòu)已經(jīng)解析完畢,但外部資源(如圖片)可能尚未加載完畢。
- 當(dāng)DOM結(jié)構(gòu)準(zhǔn)備就緒時(shí),`ready`事件被觸發(fā),表示可以對(duì)DOM進(jìn)行操作了。
- `ready`事件是jQuery特有的事件,它是通過(guò)監(jiān)聽(tīng)`DOMContentLoaded`事件實(shí)現(xiàn)的,但在某些瀏覽器中,`DOMContentLoaded`事件可能存在兼容性問(wèn)題。因此,jQuery提供了`ready`事件來(lái)確保在所有瀏覽器中一致地使用。
- 示例:
$(document).ready(function() {
// DOM準(zhǔn)備就緒后執(zhí)行的代碼
});
或簡(jiǎn)寫(xiě)為:
$(function() {
// DOM準(zhǔn)備就緒后執(zhí)行的代碼
});
總結(jié):
- `load`事件表示頁(yè)面或元素的所有資源(包括圖片、樣式表等)已經(jīng)加載完成。
- `ready`事件表示DOM結(jié)構(gòu)已經(jīng)解析完畢,可以對(duì)DOM進(jìn)行操作,但外部資源(如圖片)可能尚未加載完畢。