• 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:

  • 相关阅读:
    运行monkeyrunner脚本
    Monkey
    ubuntu下在Eclipse中配置MonkeyRunner环境
    ubuntu下Gradle离线安装
    ubuntu下反编译apk
    PuTTY 设置Serial(ubuntu)
    工作中接触的命令
    自动化功能测试(QTP)汉化12.0
    App测试工作
    vue项目在vscode中编译eslint报错没显示红色波浪线提示
  • 原文地址:https://www.cnblogs.com/zhaomeizi/p/8431707.html
Copyright © 2020-2023  润新知