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：

效果如下：