使用重写的$.ajax()实现后台处理进度显示（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：

效果如下：

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