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結構
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最後執行