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