關於前端加載的運用有兩種形式：一、DOM樹加載完成後使用，ready()；二、頁面完全加載後使用，onload、load()。
瞭解：
HTML DOM文檔加載順序：
1、解析HTML結構
2、加載外部腳本和樣式表文件
3、解析並執行腳本代碼
4、構造HTML DOM模型
5、加載圖片等外部文件
6、頁面加載完畢
ready() 方法是在頁面完成HTML的加載並建立了DOM樹之後開始執行；
onload 事件、load()方法是整個頁面已經加載完畢後執行，包括圖片等一些關聯文件。
使用：
一、ready() 方法(ready() 方法不應該與 <body οnlοad=""> 一起使用。）
1、原生JavaScript中並沒有提供 document.ready方法，需要自己定義，比較複雜，所以很少見。寫法如下：
document.ready=function(){
alert("ready");
};
2、jQuery中的三種寫法如下(常用)：
$(document).ready(function(){ alert("ready"); });
或 $(function(){ alert("ready"); });
或 $().ready(function(){ alert("ready"); });
！ 注意：ready() 函數僅能用於當前文檔，無需選擇器，document選擇器可以不要，那麼就可以寫成：$().ready(function(){});
最後$的默認事件就是ready，所以，ready也可以省略，寫成：$(function(){});
二、onload 事件、JQuery–load()方法
1、在 HTML 中(常用):onload 通常用於 元素，在頁面完全載入後(包括圖片、css文件等等。)執行腳本代碼。
<body onload = " myFunction() "> </body>
也可用於圖片標籤中<body> <img src = "logo.png" οnlοad="loadImage()" width="336" height="36"> </body>
2、在 JavaScript 中:
window.onload = function(){ alert("onload"); };
3、在 JQuery 中沒有定義onload事件，由Load()方法實現:
$(window).load(function(){
alert("onload");
});
！ 注意：load() 方法在 jQuery 版本 1.8 中已廢棄。
！！還存在一個名爲 load() 的 jQuery AJAX 方法。根據不同的參數決定調用哪個方法。
總結：
推薦使用：
DOM樹加載完成後：$(document).ready(function(){ alert("ready"); });
頁面加載完成後：<body onload = " myFunction() "> </body>
特別注意！
JQuery的$(document).ready()、$(window).load()都可以出現多次，並且裏面的函數或者代碼都可以執行。
$(window).load()在$(document).ready之後執行，且頁面中所有內容全部加載完成後纔會執行。