easyui添加加载中遮罩层

最近项目中需要用到Ajax与后台传递数据，后代在处理请求时时间有过长，为了用户体验好一点，就用到了EasyUI弹出加载中的遮罩的两种方法。

第一种：

    
    

      
      

       
       

      
      
      
      

       
       

        
        $.ajax({
       
       
      
      

      
      

       
       

      
      
      
      

       
       
    
        
        type: 
        
        'POST',
       
       
      
      

      
      

       
       

      
      
      
      

       
       
    
        
        url: url,
       
       
      
      

      
      

       
       

      
      
      
      

       
       
    
        
        data: obj,
       
       
      
      

      
      

       
       

      
      
      
      

       
       
    
        
        dataType: 
        
        'json',
       
       
      
      

      
      

       
       

      
      
      
      

       
       
    
        
        beforeSend: 
        
        function () {
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
                load();
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
            },
       
       
      
      

      
      

       
       

      
      
      
      

       
       
    
        
        complete: 
        
        function () {
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
                disLoad();
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
            },
       
       
      
      

      
      

       
       

      
      
      
      

       
       
    
        
        success: 
        
        function (data) {
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
                showMessage(data);
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
            }
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
        });
       
       
      
      

      
      

       
       

      
      
      
      

       
       
 
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
        //弹出加载层
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
        function load() {
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
            $(
        
        "<div class=\"datagrid-mask\"></div>").css({
       
       
      
      

      
      

       
       

      
      
      
      

       
       
        
        
        display: 
        
        "block",
       
       
      
      

      
      

       
       

      
      
      
      

       
       
        
        
        width: 
        
        "100%",
       
       
      
      

      
      

       
       

      
      
      
      

       
       
        
        
        height: $(
        
        window).height()
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
            }).appendTo(
        
        "body");
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
            $(
        
        "<div class=\"datagrid-mask-msg\"></div>").html(
        
        "加载中，请稍候。。。").appendTo(
        
        "body").css({
       
       
      
      

      
      

       
       

      
      
      
      

       
       
        
        
        display: 
        
        "block",
       
       
      
      

      
      

       
       

      
      
      
      

       
       
        
        
        left: ($(
        
        document.body).outerWidth(
        
        true) - 
        
        190) / 
        
        2,
       
       
      
      

      
      

       
       

      
      
      
      

       
       
        
        
        top: ($(
        
        window).height() - 
        
        45) / 
        
        2
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
            });
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
        }
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
        //取消加载层  
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
        function disLoad() {
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
            $(
        
        ".datagrid-mask").remove();
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
            $(
        
        ".datagrid-mask-msg").remove();
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
        }   
       
       
      
      
    
    

第二种：

    
    

      
      

       
       

      
      
      
      

       
       

        
        $.ajax({
       
       
      
      

      
      

       
       

      
      
      
      

       
       
    
        
        type: 
        
        'POST',
       
       
      
      

      
      

       
       

      
      
      
      

       
       
    
        
        url: url,
       
       
      
      

      
      

       
       

      
      
      
      

       
       
    
        
        data: obj,
       
       
      
      

      
      

       
       

      
      
      
      

       
       
    
        
        dataType: 
        
        'json',
       
       
      
      

      
      

       
       

      
      
      
      

       
       
    
        
        beforeSend: 
        
        function () {
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
                $.messager.progress({
       
       
      
      

      
      

       
       

      
      
      
      

       
       
            
        
        title: 
        
        '提示',
       
       
      
      

      
      

       
       

      
      
      
      

       
       
            
        
        msg: 
        
        '文件上传中，请稍候……',
       
       
      
      

      
      

       
       

      
      
      
      

       
       
            
        
        text: 
        
        ''
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
                });
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
            },
       
       
      
      

      
      

       
       

      
      
      
      

       
       
    
        
        complete: 
        
        function () {
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
                $.messager.progress(
        
        'close');
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
            },
       
       
      
      

      
      

       
       

      
      
      
      

       
       
    
        
        success: 
        
        function (data) {
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
                $(
        
        "#uploadHtmlUrl").val(data.fileUrl);
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
                $(
        
        "#uploadHtml").attr(
        
        "src", data.fileUrl);
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
            }
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
        });
       
       
      
      
    
    

我在项目中用的第一种，觉得还不错。效果如下：