原创，让你的 "Ajax"请求华丽转身，给 "body" 或是 "Div" 加上Loading遮罩！

如图一所示：body级别的遮罩，整个页面Loading加载........效果！



如图二所示：Div级别的遮罩，具体到某个Div的Loading加载........效果！



Html代码如下：

<a href="#" id="load">Load</a>
<div id="tb">
<div id="result">
</div>
</div>

在这次项目中，我就发现了这个问题，ajax请求太单调了，以前的做法都是在ajax请求之前手动去设置一个Loading加载的小图片，加载完成之后隐藏，每次都重复着写这样的代码，实在是太麻烦了。直到前段时间看了“蒋大叔”的一篇ajax文章，给了我一个想法，但是还不达打到我想要的目的，所以自己又想着做成通用的，一次性解决这个疑难杂症，一劳永逸，又自己改了改，现在总算是通用的了！

/******重写Ajax操作,做成通用Loading操作*******/
$.ajaxLoading = function (options, aimDiv) {
var img = $("<img id=\"progressImgage\"  src=\"/Images/ajax-loader.gif\" />"); //Loading小图标
var mask = $("<div id=\"maskOfProgressImage\"></div>").addClass("mask").addClass("hide"); //Div遮罩
var PositionStyle = "fixed";
//是否将Loading固定在aimDiv中操作,否则默认为全屏Loading遮罩
if (aimDiv != null && aimDiv != "" && aimDiv != undefined) {
$(aimDiv).css("position", "relative").append(img).append(mask);
PositionStyle = "absolute";
}
else {
$("body").append(img).append(mask);
}
img.css({
"z-index": "2000",
"display": "none"
})
mask.css({
"position": PositionStyle,
"top": "0",
"right": "0",
"bottom": "0",
"left": "0",
"z-index": "1000",
"background-color": "#000000",
"display": "none"
});
var complete = options.complete;
options.complete = function (httpRequest, status) {
img.hide();
mask.hide();
if (complete) {
complete(httpRequest, status);
}
};
options.async = true;
img.show().css({
"position": PositionStyle,
"top": "40%",
"left": "50%",
"margin-top": function () { return -1 * img.height() / 2; },
"margin-left": function () { return -1 * img.width() / 2; }
});
mask.show().css("opacity", "0.1");
$.ajax(options);
};

调用如下：

$("#load").click(function() {
$.ajaxLoading({
url:'@Url.Action("Index")?' + new Date().toTimeString(),
success: function (result) {
$("#result").html(result);
}
}, "#tb");
});

写完收工，如果您觉得小弟还可以，请给我一点评价，哪怕是“赞”，也可以！