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