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

阳光穿透心脏的1/2处 2021-12-14 03:27 147阅读 0赞

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

![27105910-022ddab234204711ad801a54896543e6.png][]

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

![27105920-1b054a2ce9b947ba99dc6728cfcea8e2.png][]

Html代码如下：

在这次项目中，我就发现了这个问题，**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");
        });

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

转载于:https://www.cnblogs.com/Kummy/archive/2013/03/21/2973322.html

[27105910-022ddab234204711ad801a54896543e6.png]: /images/20211213/70d2300ecd214bd595a53d53f8761f27.png
[27105920-1b054a2ce9b947ba99dc6728cfcea8e2.png]: /images/20211213/3bdb0323e5b242a597b1c3e2f7d51239.png