使用重写的$.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：

效果如下：