自定义ajax
/** * @desc 自定义ajax请求,添加等待gif */ var n=0; $.defineAjax=function(obj){ n++; if(!$('#loadingDiv')[0]){ var str='<div id="loadingDiv"><img class="loadingImg" src="'+path+'/ui/common/img/loading.gif"></div>'; $('body')[0].appendChild($(str)[0]); } if(typeof obj.success == 'function'){ var fun=obj.success; obj.success=function(res){ if($('#loadingDiv')[0]){ $('#loadingDiv').remove(); } fun(res); } } var opt={ type:'post', data:{}, dataType:'json', beforeSend:function(xhr){}, complete:function(xhr,status){ if(--n<=0){ $('#loadingDiv').remove(); } } },option={}; if(obj.beforeSend===undefined&&obj.complete===undefined){ option=$.extend({},opt,obj); } setTimeout(function(){ $.ajax(option); },200) }
关键能耗指标分析
js:
option为ajax里面的参数
$.pageAjax=function(option){ if(!$('div.page-loading')[0]){ $('body').append('<div class="page-loading" style="display:none;"></div>'); } $('div.page-loading').fadeIn(100); var op={ type:"post", DataType:'json' },fn={ success:function(res,mes){ $('body').find('div.page-loading').fadeOut(100); if(typeof option.success==='function'){ option.success(res,mes); } }, error:function(XHRObj,err,ext){ $('body').find('div.page-loading').fadeOut(100);; if(typeof option.error==='function'){ option.error(XHRObj,err,ext); } } } var opt=$.extend({},op,option,fn); $.ajax(opt); }
css
div.page-loading{ position: absolute; top:0;bottom:0; left:0;right:0; background: url('../img/page_loading.gif') no-repeat center center; margin:auto; width:65px; height:65px; border-radius: 50%; }
调用:
$.pageAjax(opt.ajax);
效果:
这种正常来说是ok的,单个请求的时候是不会有问题,但是如果有多个请求在发生,并且之前的请求还没有完成的时候,又进行下一个请求,这样就会存在问题
修改:在每次请求之前记录请求的次数,请求之前加1,请求之后不管成功或者失败都减1,如果为0或者小于0,那么就隐藏loading
js
/* *ajax loading包装插件 */ $.pageAjax=function(option){ var op={ type:"post", DataType:'json' },fn={ beforeSend:function(){ var el=$('div.page-loading'); if(!el[0]){ $('body').append('<div class="page-loading" data-times="1" style="display:block;"></div>'); }else{ showOrHide(el,'+'); } //每次只有要请求都要显示 el.fadeIn(100); }, success:function(res,mes){ showOrHide($('body').find('div.page-loading'),'-'); if(typeof option.success==='function'){ option.success(res,mes); } }, error:function(XHRObj,err,ext){ showOrHide($('body').find('div.page-loading'),'-'); if(typeof option.error==='function'){ option.error(XHRObj,err,ext); } } } var opt=$.extend({},op,option,fn); $.ajax(opt); } function showOrHide(el,p){ var num=el.attr('data-times'); if(isNaN(num)){num=0;} if(p=='+'){ el.attr('data-times',++num);//注意此处是++num ++i和i++的区别借鉴for循环的例子 }else if(p=='-'){ el.attr('data-times',--num); if(num<=0){ el.fadeOut(100); } } }
还有一种,直接方式,页面查询数据的时候调用显示的方法,成功或者失败的时候调用隐藏的方法
调用显示:
$("#searchbtn").off("click").on("click","",function(){ $.fn.showorhideLoading.show(); getChecknode(); })
调用隐藏
function postAjaxData(param){ //请求 $.ajax({ url:'/findEnergyDayTypeDataList', data:param, dataType:'json', success:function(data){ $.fn.showorhideLoading.hide();//隐藏loading //处理数据 var dataObj=initData(data.detail); }, error:function(){ $.fn.showorhideLoading.hide();//隐藏loading } }) }
html
<div class="loading" style="display: none;"><img src="/static/ui/modules/systemMan/demo/img/loading.gif" alt=""></div>
css
/*loading效果*/ .loading{ position:fixed; top:0; left:0; right:0; bottom:0; width:100%; height:100%; background-color: rgba(0,0,0,.5); z-index: 999999; } .loading>img{ position:absolute; width:40px; height:40px; top:0; left:0; right:0; bottom:0; margin:auto; }
/** * 控制dialog的显示和隐藏 */ $.fn.showorhideLoading={ show:function(id){ if(id===undefined){ id="body"; } //判断是否存在loading var el=$(id).find(".loading"); if(!el[0]){ $(id).append( '<div class="loading" style="display: block;">'+ '<img src="/static/ui/modules/systemMan/demo/img/loading.gif" alt="">'+ '</div>' ); } el.show() }, hide:function(id){ if(id===undefined){ id="body"; } //判断是否存在loading var el=$(id).find(".loading"); if(el){el.hide()} } }