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