本文主要是介绍页面加载时让其显示笼罩层与加载等待图片，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
原文地址：http://www.cnblogs.com/Zbuxu/p/6187328.html
页面加载时让其显示笼罩层与加载等待图片：
用了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执行的，所以页面不会卡死。
这篇关于页面加载时让其显示笼罩层与加载等待图片的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
