等待刷新之利器 -- 简单使用JQuery BlockUI

<!-- JQ Block UI -->
<!-- 第一步，引入相关js文件，注意的是blockUI依赖于jQuery -->
<script type="text/javascript" src="../ui/jquery.blockUI.js"></script>
<script type="text/javascript" src="../jq/jquery.min.js"></script>

<!-- 第二步，让旋转的小图标隐藏起来(其实就是一个gif图片，哈哈）-->
<div style="display: none" id="loading"><img src="../img/loading.gif" alt="loading"/></div>

<!-- 在Ajax使用之前添加 -->
$(document).ajaxStart(function(){
$.blockUI({
message: $('#loading'),
css: {
top:  ($(window).height() - 400) /2 + 'px',
left: ($(window).width() - 400) /2 + 'px',
width: '400px',
border: 'none'
},
overlayCSS: { backgroundColor: '#fff' }
});
}).ajaxStop($.unblockUI);
<!-- there is your Ajax request -->

官网：http://malsup.com/jquery/block/

其中例子很详细，可以参考学习。上面所写的若请求Ajax一直没有结束，用户都无法进行其他操作，有点不友好，可以设置超时时间，详细查看官网setTimeOut。

疑惑：当文档刚开始加载的时候，这个BlockUI是无法起作用，只能在浏览器渲染完毕后，为按钮添加事件什么的才起作用。还没弄明白，欢迎大侠指教。