码迷,mamicode.com
首页 > Web开发 > 详细

使用重写的$.ajax()实现后台处理进度显示(gif)

时间:2015-08-11 18:56:16      阅读:116      评论:0      收藏:0      [点我收藏+]

标签:jquery   ajax   loading   gif   

JS代码

(function($) {     
        $("#progressImgage").hide();
        $("#maskOfProgressImage").hide();
        //备份jquery的ajax方法
        var _ajax = $.ajax;

        //重写jquery的ajax方法
        $.ajax = function(options) {
            var img = $("#progressImgage");
            var mask = $("#maskOfProgressImage");
            img.removeClass(‘hide‘);
            mask.removeClass(‘hide‘);
            var complete = options.complete;
            options.complete = function(httpRequest, status) {
                img.hide();
                mask.hide();
                if (complete) {
                    complete(httpRequest, status);
                }
            };
            img.show();
            img.show().css({
                "position" : "fixed",
                "top" : "50%",
                "left" : "50%",
                "width" : "150px",
                "height" : "150px",
                "margin-top" : function() {
                    return -1 * img.height() / 2;
                },
                "margin-left" : function() {
                    return -1 * img.width() / 2;
                }
            });
            mask.show().css("opacity", "0.2" );
            return _ajax(options);
        }
    })(jQuery);

CSS代码:

.error {
    color: red;
    margin: 15px;
}

.hide {
    display: none;
}

.progress {
    z-index: 2000
}

.mask {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    background-color: #000000
}

html代码:

    <img id="progressImgage" class="progress hide" src="<c:url value="/resources/img/ajax-loader.gif"/>" />
    <div id="maskOfProgressImage" class="mask hide"></div>

下面是我使用的gif:

技术分享

效果如下:
技术分享

版权声明:本文为博主原创文章,转载的时候请注明出处。

使用重写的$.ajax()实现后台处理进度显示(gif)

标签:jquery   ajax   loading   gif   

原文地址:http://blog.csdn.net/u013816347/article/details/47422015

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!