在前端開發中,ready()
和 load()
是兩個重要的事件處理函式,它們用於在網頁載入時執行相應的程式碼。以下是一個簡單的例子,說明這兩個事件處理函式的使用。
jQuery ready() 函式
ready()
函式通常與 jQuery 函式一同使用,用來確保在 DOM(文檔物件模型)準備就緒後執行相應的程式碼。這對於需要等待 DOM 元素完全載入後再執行的情況非常有用。
$(document).ready(function() {
// 在這裡放置當文檔就緒時執行的程式碼
console.log("Document is ready!");
// 可以進行DOM的操作或其他初始化工作
});
或者,使用簡化的形式:
$(function() {
// 簡化的 ready() 寫法
console.log("Document is ready!");
});
jQuery load() 函式
load()
函式用於處理整個網頁(包括內容和資源)完全載入後執行的程式碼。這包括所有的圖片、樣式表、腳本等資源。
$(window).on('load', function() {
// 在這裡放置當整個網頁載入完成時執行的程式碼
console.log("Page and all resources are loaded!");
// 可以進行需要在所有資源載入完成後執行的工作
});
在純JavaScript中,可以使用以下方式實現:
window.onload = function() {
// 在這裡放置當整個網頁載入完成時執行的程式碼
console.log("Page and all resources are loaded!");
// 可以進行需要在所有資源載入完成後執行的工作
};
總的來說,ready()
用於當 DOM 準備就緒時執行程式碼,而 load()
用於當整個網頁及其資源都載入完成後執行程式碼。根據需求選擇適當的事件處理函式。
發表迴響