頁面加載時讓其顯示籠罩層與加載等待圖片（結局比較完美，過程很坎坷，所以一定總結整理下，備用）：
用了ajax異步，是因為js內容不能即時的顯示出來，因為js是單線程，要把隊列中的任務執行完后才會執行剛才對js的處理
要用beforeSend，complete的時候必須要用ajax異步
beforeSend: function () {},//程序一開始便會執行該函數，使用該方法必須使用異步ajax
complete: function () {},//complete在success或error執行后執行
$.ajax({
type: "POST",
url: " ",
contentType: "",
data: fields,
beforeSend: function () {
var div1 = document.getElementById('form-submit-loading');
var div2 = document.getElementById('form-submit-overlay');
//由於頁面的緩存問題，會出現加載等待圖片重復的一些問題，所以在這塊進行了判斷，如果這些元素id存在直接讓它顯示就好，如果不存在（undefined），再執行創建的代碼
if ((div1 == undefined) && (div2 == undefined)) {
//等待加載圖片以籠罩層的創建代碼
var loading = form_submit_overlay_loading();
var overlay = form_submit_overlay_f();
// $('body').append(loading);可以是整個頁面，獲取整個頁面的寬度：$(window).width()。Div1只是個彈出框的id，這塊僅對彈出框做加載效果
$('#Div1').append(loading);
$('#Div1').append(overlay);
var width = 130;
var height = 80;
var left = ($('#Div1').width() / 2) - (width / 2) + $(document).scrollLeft();
var top = ($('#Div1').height() / 2) - (height / 2) + $(document).scrollTop();
$("#form-submit-loading").css("top", top + "px").css("left", left + "px").css("display", 'block');
$("#form-submit-overlay").css("display", "block");
}
$("#form-submit-loading").css("display", "block");
$("#form-submit-overlay").css("display", "block");
},
//之所以沒使用這個，是因為是修改被人做好的項目，在項目執行success的時候頁面被指向了其他地方，回調的時候頁面已經不存在，所以complete不會執行
//complete:function(){
//$("#form-submit-loading").css("display","none");
//$("#form-submit-overlay").css("display","none");
//},
success: function (msg) {
if (msg != "sucees") {
alert(msg + ",請重新操作");
} else {
alert("操作成功");
$("#form-submit-loading").css("display","none");
$("#form-submit-overlay").css("display","none");
}
}
error: function () {
},
//默認是false，同步；true為異步
async: true
});
JS是單線程的，當一個函數執行的時候，JS引擎會鎖住DOM樹，其他事件的響應代碼只能在隊列中等待，並且此時頁面卡死。
事實上異步Ajax確實用了多線程，只是Ajax請求的Http連接部分由瀏覽器另外開了一個線程執行，執行完畢之后給JS引擎發送一個事件，這時候異步請求的回調代碼得以執行。
Http請求的執行在另外一個線程中，由於這個線程並不會操作DOM樹，所以是可以保證線程安全的。發起Ajax請求和回調函數中間是沒有JS執行的，所以頁面不會卡死。