溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
在實際應用中往往需要在頁面加載完畢之后再去執(zhí)行相關(guān)的js代碼，之所以這么操作是有道理的，如果是操作dom元素，如果相關(guān)元素沒有加載完成，而去執(zhí)行js代碼，可能會導致錯誤，下面就介紹一下如何實現(xiàn)頁面加載完成再去執(zhí)行代碼，這是最為基礎(chǔ)的知識了，可能初學者還不太了解，寄希望能夠給需要的朋友帶來一定幫助。
一.window.onload事件:
代碼如下:
原生js
window.onload=function(){
//code
}
jquery
$(window).load(function(){
//code
});
當頁面完全加載完畢之后再去執(zhí)行code代碼。說明頁面需要dom操作，必須到最后才可以執(zhí)行。
二.使用jQuery的ready事件:
$(document).ready(function() {
//code
});
一般
(function () {
//code
}
})();
當穩(wěn)當結(jié)構(gòu)加載完畢再去執(zhí)行code代碼。
通用的頁面加載后再運行JS有兩種方式：1、在DOM加載完畢后，頁面全部內(nèi)容（如圖片等）完全加載完畢前運行JS。 2、在頁面全部內(nèi)容加載完成（包括引用文件，圖片等）之后再加載JS
1、在DOM加載后，全部內(nèi)容加載前運行
這種方式在同一文件中可以運行多個且不會覆蓋。
由于在$(document).ready()方法只要DOM就緒就會被執(zhí)行，因此可能此時元素的關(guān)聯(lián)文件未下載完。例如與圖片有關(guān)的HTML下載完畢，并且已經(jīng)解析為DOM樹了，但很有可能圖片還未加載完畢，所以例如圖片的高度和寬度這樣的屬性此時不一定有效。要解決這個問題，可以使用Jquery中 load（）方法在需要的文件加載完畢后對其進行操作。
$(document).ready(function(){});
$().ready(function(){}) //簡寫 當$()不帶參數(shù)時默認就是document
$(function(){}); //簡寫
2、在全部內(nèi)容加載后運行
這種方式中只能執(zhí)行一個 onload代碼，當文件由多個onload或者load，只加載最后一個，前面的將會被覆蓋且前面的onload里面的代碼不會執(zhí)行。
window.onload = function(){}; // —-js
$(window).load(function(){}); //---jquery
3、DOM文檔加載步驟
1.解析HTML結(jié)構(gòu)
2.加載外部的腳本和樣式文件
3.解析并執(zhí)行腳本代碼
4.執(zhí)行$(function(){})內(nèi)對應代碼
5.加載圖片等二進制資源
6.頁面加載完畢，執(zhí)行window.onload
補充：
1：$(function){};
2：$(document).ready(function(){});
3：$(window).load(function(){});
4：window.onload = function(){};
5：在標簽上靜態(tài)綁定onload事件，<body onload="aaa()">等待body加載完成，就會執(zhí)行aaa()方法。
注：第1種是第2種的簡寫方式。兩個是document加載完成后就執(zhí)行方法。第3種和第4種都是等到整個window加載完成執(zhí)行方法體。兩者也沒有區(qū)別，只是一個使用dom對象，一個使用jQuery對象。
執(zhí)行順序：1和2無論放在哪里都是最先執(zhí)行，3和4在其之后執(zhí)行，5最后執(zhí)行
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼