在页面Ajax请求或者文件上传等待时，添加"转菊花"图标

在我们用ajax向后台发送数据或者请求数据时，要等待一段时间，有时有个转菊花的话，用户体验会好点。

 代码如下：

1. js先给页面加个隐藏的菊花页面，样式图标自己改,我是在做webApp用框架里的图标的。

$(docment).ready(function(){

 $('body').append("<div style='display:none;width:100%; margin:0 auto;position:fixed;left:0;top:0;bottom: 0;z-index: 111;opacity: 0.5;' id='loading'>

<a class='mui-active' style='left: 50%;position: absolute;top:50%'><span class='mui-spinner'></span><p style='margin-left: -10px;'>发送中...</p></a></div>")

})

 

2.全局配置，在Ajax请求开始时显示菊花页面，结束时隐藏页面。

　　$(document).ajaxStart(function(){

　　$("#loading").show();

　　})

　　$(document).ajaxComplete(function(){

　　$("#loading").hide();

　})