讓你的頁面實現自訂的 Ajax 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操作*******/        $.ajax2 = 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);        };

調用如下：

//頁面Div的Loading效果$("#load").click(function() {        $.ajax2({            url:'@Url.Action("Index")?' + new Date().toTimeString(),            success: function (result) {                $("#result").html(result);            }        }, "#tb");    });//整個頁面的Loading效果$("#load").click(function() {        $.ajax2({            url:'@Url.Action("Index")?' + new Date().toTimeString(),            success: function (result) {                $("#result").html(result);            }        });    });

 

總結：希望能給大家一點啟示，好東西應該分享，本人很菜！