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