/*第一次刷新--非定时器刷新数据*/
var fistInitColumn = true;
var getAllColumnDatas = function(){
var params = {};
var resourcesID = [];
for(var i = 0; i < leftCenterMenus.length; i++){
resourcesID.push(leftCenterMenus[i].id);
}
for(var i = 0; i < leftBottomMenus.length; i++){
resourcesID.push(leftBottomMenus[i].id);
}
params.resourcesID = resourcesID;
$.ajax({
type : "POST",
data: params,
datatype : "json",
async:true,
traditional: true,
url : "/api/column/getColumnData",
success : function(data, status, xhr) {
var jsonResult = null;
if(typeof data == 'string'){
jsonResult = JSON.parse(data);
}else{
jsonResult = data;
}
//成功执行操作 fistInitColumn = false;
}
},
beforeSend: function(){
if(fistInitColumn){
setLoadingHtml("leftCenter");
setLoadingHtml("leftBottom");
}
},
complete: function(){
removeLoadingHtml("leftCenter");
},
error : function(data, status, xhr) {
console.log('服务器错误！');
return;
} });
}
这个function有个定时器定时请求，需求是第一个加载请求显示loading，定时数据请求时，不需要显示loading样式；加了一个fistInitColumn全局变量控制。
/*设置loading的HTML*/
var setLoadingHtml = function(idName){
var $div = $("#" + idName +"_detail");
$div.html("");
var loadStr = '<div class="loadingWrap"></div>';
$div.append(loadStr);
}
/*移除loading的HTML*/
var removeLoadingHtml = function(idName){
var $div = $("#" + idName + "_detail .loadingWrap").remove();
}
下面是loading的css样式：
/* loading */
.loadingWrap{
position:absolute;
top:0;
left:0;
width: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：