页面加载时让其显示笼罩层与加载等待图片（结局比较完美，过程很坎坷，所以一定总结整理下，备用）：
用了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执行的，所以页面不会卡死。