• ajax请求成功前,加载中loading显示


     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:

  • 相关阅读:
    [SQL]触发器把自增ID的值赋值给另外一个字段
    [SQL]T-Sql 递归查询(给定节点查所有父节点、所有子节点的方法)
    [二维码开发]二维码开发入门级demo
    [sql]sql函数coalesce返回第一个非空的值
    [编程小技巧]Notepad++中如何实现文本对比功能?
    [ExcelHome]VLOOKUP的别样用法
    [ExcelHome]15个常用的Excel函数公式,拿来即用
    [ExcelHome]学习Excel的网站
    Permutations
    Remove Duplicates from Sorted List II
  • 原文地址:https://www.cnblogs.com/zhaomeizi/p/8431707.html
Copyright © 2020-2023  润新知