1 /*第一次刷新--非定时器刷新数据*/ 2 var fistInitColumn = true; 3 var getAllColumnDatas = function(){ 4 var params = {}; 5 var resourcesID = []; 6 for(var i = 0; i < leftCenterMenus.length; i++){ 7 resourcesID.push(leftCenterMenus[i].id); 8 } 9 for(var i = 0; i < leftBottomMenus.length; i++){ 10 resourcesID.push(leftBottomMenus[i].id); 11 } 12 params.resourcesID = resourcesID; 13 $.ajax({ 14 type : "POST", 15 data: params, 16 datatype : "json", 17 async:true, 18 traditional: true, 19 url : "/api/column/getColumnData", 20 success : function(data, status, xhr) { 21 var jsonResult = null; 22 if(typeof data == 'string'){ 23 jsonResult = JSON.parse(data); 24 }else{ 25 jsonResult = data; 26 } 27 //成功执行操作 28 29 fistInitColumn = false; 30 } 31 }, 32 beforeSend: function(){ 33 if(fistInitColumn){ 34 setLoadingHtml("leftCenter"); 35 setLoadingHtml("leftBottom"); 36 } 37 }, 38 complete: function(){ 39 removeLoadingHtml("leftCenter"); 40 }, 41 error : function(data, status, xhr) { 42 console.log('服务器错误!'); 43 return; 44 } 45 46 }); 47 }
这个function有个定时器定时请求,需求是第一个加载请求显示loading,定时数据请求时,不需要显示loading样式;加了一个fistInitColumn全局变量控制。
1 /*设置loading的HTML*/ 2 var setLoadingHtml = function(idName){ 3 var $div = $("#" + idName +"_detail"); 4 $div.html(""); 5 var loadStr = '<div class="loadingWrap"></div>'; 6 $div.append(loadStr); 7 }
/*移除loading的HTML*/ var removeLoadingHtml = function(idName){ var $div = $("#" + idName + "_detail .loadingWrap").remove(); }
下面是loading的css样式:
/* loading */ .loadingWrap{ position:absolute; top:0; left:0; 100%; height:100%; z-index:300; background-image:url(../images/loading.gif); background-repeat:no-repeat; background-position:center center; background-color:#fff; background-color:rgba(256,256,256,0.5); filter:alpha(opacity=50); }
下面这个是在网友那里拿的一个gif: