Easy UI弹出加载中（loading）提示的两种方法

最近项目的一个查询耗时比较久，用户点击查询没有反应可能造成重复点击，并且以为是bug，所以为了用户体验好一点想弹出加载中的遮罩提示，因为后台框架用的Easy UI，所以想到了两种办法。

方法一：利用Easy UI自带的遮罩样式，控制显示与隐藏

   /*加载数据提示*/
   function ajaxLoading() {
       $("<div class=\"datagrid-mask\"><iframe id=\"iframe1\" src=\"about:blank\" frameBorder=\"0\" marginHeight=\"0\" marginWidth=\"0\" style=\"position:absolute; visibility:inherit; top:0px;left:0px;width:100%; height:100%;z-index:-1; filter:alpha(opacity=0.5);\"></iframe></div>").css({ "display": "block", "z-index": "999999" }).appendTo("body");
       $("<div class=\"datagrid-mask-msg\"></div>").html("正在查询数据，请稍候。。。").appendTo("body").css({ "display": "block", "left": ($(document.body).outerWidth(true) - 190) / 2, "top": ($(window).height() - 200) / 2 });
   }
   /*去掉加载数据提示*/
   function ajaxLoadEnd() {
       $(".datagrid-mask").remove();
       $(".datagrid-mask-msg").remove();
   }
   function getData() {
       /*正在加载*/
       ajaxLoading();
       $.ajax({
           url : "url",
           type : "POST",
           data : {
               
           },
           dataType : "json",
           success : function(data) {
               /*返回数据，不显示加载提示*/
               ajaxLoadEnd();
           },
           error : function(XMLHttpRequest, textStatus, errorThrown) {
               alert( '服务器正忙');
           }
       });
  }

效果如下：

方法二：Easy UI的进度条方法

/*进度条提示*/
$.messager.progress({
    title: '提示',
    msg: '数据请求中，请稍候……',
    text: ''
});

/*关闭提示*/
$.messager.progress('close');

示例：

function getData() {
       /*正在加载*/
       $.messager.progress({
           title: '提示',
           msg: '数据请求中，请稍候……',
           text: ''
       });
       $.ajax({
           url : "url",
           type : "POST",
           data : {

           },
           dataType : "json",
           success : function(data) {
               /*返回数据，不显示加载提示*/
               $.messager.progress('close');
           },
           error : function(XMLHttpRequest, textStatus, errorThrown) {
               alert( '服务器正忙');
           }
       });
   }

效果如下：

原文作者技术博客：https://www.jianshu.com/u/ac4daaeecdfe
95后前端妹子一枚，爱阅读，爱交友，将工作中遇到的问题记录在这里，希望给每一个看到的你能带来一点帮助。
欢迎留言交流