在JS開發中，隨著互聯網的發展以及用戶需求的提高，我們通常需要在頁面加載后執行一些JS操作，比如數據請求、元素操作等。那么如何實現JS頁面加載完執行事件呢？下文將從多個方面進行詳細闡述。
一、使用window.onload事件
使用window.onload事件，可以在整個文檔及其所有資源（如圖片和樣式表）加載完成后觸發，一般情況下用于執行初始化的操作。
window.onload = function() {
console.log("頁面加載完成");
//執行其他操作
};
二、使用DOMContentLoaded事件
使用DOMContentLoaded事件，當頁面的DOM（文檔對象模型）加載完成后就會觸發，此時其他資源仍在加載，一般情況下用于執行一些影響DOM的操作。
document.addEventListener("DOMContentLoaded", function() {
console.log("DOM加載完成");
//執行其他操作
});
三、使用jQuery的$(document).ready()方法
使用jQuery提供的$(document).ready()方法可以達到與DOMContentLoaded事件相似的效果，它會在DOM加載完成后就會觸發，此時其他資源仍在加載。
$(document).ready(function() {
console.log("DOM加載完成");
//執行其他操作
});
四、使用defer屬性
使用defer屬性，可以延遲JS的執行，等到網頁加載完畢之后再執行。需要注意的是，如果有多個defer屬性的JS文件，會按照它們在頁面中出現的順序來依次執行。
五、使用async屬性
使用async屬性，可以在JS加載完成后立即執行，沒有順序要求。適用于不需要立即執行的JS文件。
六、通過動態創建script標簽實現
通過在JS中動態創建script標簽，可以控制它們的加載和執行時間，比如可以先加載JS文件，等到頁面加載完成后再執行。
var script = document.createElement("script");
script.src = "demo.js";
document.body.appendChild(script);
window.onload = function(){
console.log("頁面加載完成");
//執行其他操作
}
以上就是JS頁面加載完執行事件的幾種實現方式，我們可以根據實際需求選擇適當的方式。以便更好的滿足用戶的需求，為用戶提供更好的體驗。
京公網安備 11010802030320號