jQuery Easy UI 实现页面的Loading效果（类似于Android的ProgressDialog）

前言

很常用的一种前端效果，比如当用户点击网页的某个按钮发送了一条异步请求，如果响应时间过长容易导致用户重复点击，一方面影响用户体验一方面容易造成不必要的服务端压力，Easy UI有现成的mask样式，简单封装一下就可以使用，之前查阅搜集了相关资料和文章，发现都介绍的都不是很完整，所以本篇blog就完整的记录一下通过Easy UI快速实现这种效果以及如何集成到项目中。

引入、封装和调用

首先当然是在我们的项目中集成jquery以及easyui的相关资源包，除了jquery的核心js文件，easyui的话一般也不需要完整的包，除了核心js文件之外根据需求保留部分即可，我在项目中的目录文件是：

接下来就是在jsp页面中引入js和css了：

<!-- jquery core --><script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery/jquery-1.8.0.min.js"></script><!-- easyui --><link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/easyui/themes/default/easyui.css"><script type="text/javascript" src="${pageContext.request.contextPath}/js/easyui/jquery.easyui.min.js"></script><script language="javascript"  src="${pageContext.request.contextPath}/js/easyui/locale/easyui-lang-zh_CN.js"></script>

接下来就是核心的js代码了，新建一个common.js，将mask的样式以及操作封装成一个MaskUtil对象：

var MaskUtil = (function(){          var $mask,$maskMsg;            var defMsg = '正在处理，请稍待。。。';            function init(){          if(!$mask){              $mask = $("<div class=\"datagrid-mask mymask\"></div>").appendTo("body");          }          if(!$maskMsg){              $maskMsg = $("<div class=\"datagrid-mask-msg mymask\">"+defMsg+"</div>")                  .appendTo("body").css({'font-size':'12px'});        }                    $mask.css({width:"100%",height:$(document).height()});                    $maskMsg.css({              left:($(document.body).outerWidth(true) - 190) / 2,top:($(window).height() - 45) / 2,        });                         }            return {          mask:function(msg){              init();              $mask.show();              $maskMsg.html(msg||defMsg).show();          }          ,unmask:function(){              $mask.hide();              $maskMsg.hide();          }      }        }());  

可以看到，在初始化时，我们定义了2个div，第一个div设置了easyui的datagrid-mask样式，即通过设置整个页面的透明度来达到“遮蔽”的那种效果，在easyui.css可以找到这个样式：

.datagrid-mask {  position: absolute;  left: 0;  top: 0;  width: 100%;  height: 100%;  opacity: 0.3;  filter: alpha(opacity=30);  display: none;}

而第二个div设置了datagrid-mask-msg样式，即是我们居中的小dialog窗体，并通过一行文字来进行提示，同样的看看它的css样式：

.datagrid-mask-msg {  position: absolute;  top: 50%;  margin-top: -20px;  padding: 12px 5px 10px 30px;  width: auto;  height: 16px;  border-width: 2px;  border-style: solid;  display: none;}

可以看到我们封装的这个MaskUtil对象提供了2个方法：mask和unmask，显而易见，一个显示Loding，另一个是隐藏Loading，这样只要我们在页面引入了common.js，我们就可以方便的调用这两个方法来实现Loding效果了。

关于如何调用想必大家都已经很清楚了，我们都会选择在耗时任务开始的时候开启mask，当得到服务端响应的时候结束mask，完全类似于Android中的处理方式，比如我们在Activity中new一个ProgressDialog，一般在工作线程开启或者AsynTask execute时show dialog，而当异步任务结束时会在onPostExecute方法中再调用dialog.dismiss().

在web中依然是类似的，我们可以在$.ajax方法之前调用MaskUtil.mask()去开启Loding，而在ajax的success或者error的回调方法中再调用MaskUtil.unmask()来隐藏Loding，比如我在项目中就是这样写的：

function getExportExcel2() {MaskUtil.mask();$.ajax({url : '../../app/studentInfo/getExportStudentInfoExcelTwo',method : 'post',cache : false,success : function(data) {MaskUtil.unmask();if ("ok" == data.data) {if (confirm("导出成功,是否立即下载?")) {var fileName = data.fileName;window.location.href = "../../filedown/" + fileName+ ".zip";}}}});}

是不是一目了然，我觉得不用做过多说明了，最后看一下效果图：

当点击“导出Excel”按钮即可看到上图效果，当服务端响应成功之后Loding效果会自动取消。但仔细和Android的ProgressDialog比较一下不难发现少了一个动态的圆形进度条，Android中的ProgressDialog作为一个标准的UI控件是自带圆形进度条的，它通过setTitle和setMessage来设置Loding的标题和内容，而easyui的mask其实也是自带这种效果的，但是需要一张gif图片，我们只需要把loading.gif这张图片拷贝到easyui的themes-default-images目录下即可，这张gif图可以在下载好的easyui包中找到，即这样一张图：

将这张图拷贝到上面说的目录之后，清理一下浏览器缓存，刷新页面，再次点击“导出Excel”按钮，即可看到如下的效果图：

这次就可以完美的看到我们的Loading效果了。

总结

本篇blog记录了web中Loading的一种较为简单和常用的解决方案，核心js文件来自网络，我仅仅做了部分分析并且和Android中的ProgressDialog做了比较，以后我也会把项目中遇到的比较好的功能总结一下写到blog中，边学习边总结，边总结边积累，哪怕只有一点点也是进步。加油，Raito！