如何实现提交后页面加载中loading锁定页面Ajax通过Jquery

将下列代码加入CSS中

.modal {
display: none;
position: fixed;
z-index: 1000;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba( 255, 255, 255, .8 )
url('http://xxxxx/xxxxx.gif')
50% 50%
no-repeat;
}
/* loading时候页面锁定 */
body.loading {
overflow: hidden;
}
/* loading时候页面锁定,显示modal部分 */
body.loading .modal {
display: block;
}


注意将url(‘http://xxxxx/xxxxx.gif’)中的链接换成你要选用的加载中的动画gif图片，例如下面的这张：

最后, 通过body的加载和删除loading class来控制loading的gif动画锁定。
比如将
$body = $("body");$body.addClass("loading");
放置在发送请求之前。 并将
$body = $("body");$body.removeClass("loading");
放置在接受到请求之后。

也可以尝试以下演示:

$body = $("body");
$(document).on({
ajaxStart: function() { $body.addClass("loading"); },
ajaxStop: function() { $body.removeClass("loading"); }
});