一款基于jQuery Ajax的等待效果

特别提示：本人博客部分有参考网络其他博客，但均是本人亲手编写过并验证通过。如发现博客有错误，请及时提出以免误导其他人，谢谢！欢迎转载，但记得标明文章出处：http://www.cnblogs.com/mao2080/

1、效果示例

1、加载中效果

2、加载后效果

2、代码样例

 var ajaxUtil = {
             /**为保证load图标不会一闪而过，小于600毫秒的请求将延时加载*/
             loadShowTime:,
             /**
              * Ajax请求
              * @param {Object} url 请求的url
              * @param {Object} params 参数（json类型，如：{userName:'admin', email:'mao2080@sina.com'}）
              * @param {Object} successCallBack 自定义函数-成功时返回
              * @param {Object} errorCallBack 自定义函数-失败时返回
              * @param {Object} args 其他参数{"loadingId":null}
              */
             ajaxRequest : function(url, params, successCallBack, errorCallBack, args){
                 args = ajaxUtil.showLoading(args);
                 $.ajax({
                     url:url,
                     data:params,
                     type:"get",
                     dataType:"json",
                     async:true,
                     success:function(res){
                         if(res.success || res.code == ){
                             args.timestamp = new Date().getTime()-args.timestamp;
                             if(args.timestamp || args.timestamp > ajaxUtil.loadShowTime){
                                 window.setTimeout(function(){
                                     ajaxUtil.hideLoading(args);
                                     successCallBack(res);
                                 }, ajaxUtil.loadShowTime-args.timestamp);
                             }else{
                                 ajaxUtil.hideLoading(args);
                                 successCallBack(res);
                             }
                         }else{
                             ajaxUtil.hideLoading(args, true);
                             if(errorCallBack){
                                 errorCallBack(res);
                             }
                         }
                     },
                     error:function(res){
                         ajaxUtil.hideLoading(args);
                         alert("请求失败...");
                     },
                 });
             },
             /**
              * 显示加载loading
              * @param {Object} args
              */
             showLoading:function(args){
                 args = !args?{}:args;
                 args.timestamp = new Date().getTime();
                 if(args.loadingId){
                     var container = $(args.loadingId);
                     if(container){
                         container.css({"position":"relative"});
                         container.append('<div class="loading" style="width:60px; height:24px; position:absolute;left:50%;top:50%;margin-left:-30px;margin-top:-12px;"><img src="img/loading-0.gif"/></div>');
                     }
                 }
                 return args;
             },
             /**
              * 隐藏加载loading
              * @param {Object} args
              */
             hideLoading:function(args){
                 if(args.loadingId){
                     var container = $(args.loadingId);
                     if(container){
                         container.find('.loading').remove();
                     }
                 }
             }
         }

         $(function(){
             ajaxUtil.ajaxRequest("data.json", null, function(res){
                 //处理请求成功
                 $("#userName").html(res.data.userName);
                 $("#email").html(res.data.email);
             }, function(res){
                 //处理请求失败
             }, {loadingId:"#test1"})
         });

3、资料下载

load-demo.rar