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

最新推荐文章于 2025-03-28 10:16:58 发布

caicai1171523597

最新推荐文章于 2025-03-28 10:16:58 发布

阅读量8.7k

点赞数 10

本文链接：https://blog.csdn.net/caicai1171523597/article/details/95454341

版权

最近项目的一个查询耗时比较久，用户点击查询没有反应可能造成重复点击，并且以为是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( '服务器正忙');
           }
       });
   }

效果如下：