Kummy's Blog

o(︶︿︶)o { name : 'Kummy' , job : 'Feser' }

让你的页面实现自定义的 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);
            }
        });
    });

 

总结:希望能给大家一点启示,好东西应该分享,本人很菜!

 

posted @ 2013-05-29 13:46 李 维 阅读(...) 评论(...) 编辑 收藏