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

原文地址为： 使用重写的$.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：

效果如下：

转载请注明本文地址： 使用重写的$.ajax()实现后台处理进度显示（gif）