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 }
- <img id="progressImgage" class="progress hide" src="<c:url value="/resources/img/ajax-loader.gif"/>" />
- <div id="maskOfProgressImage" class="mask hide"></div>
下面是我使用的gif：
效果如下：
