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

最新推荐文章于 2025-09-18 12:20:37 发布

原创最新推荐文章于 2025-09-18 12:20:37 发布 · 2.5k 阅读

1 ·

CC 4.0 BY-SA版权

jQuery 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何利用BlockUI插件提升Ajax请求期间的用户体验，包括加载指示器的显示及位置调整等细节。


<!-- 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是无法起作用，只能在浏览器渲染完毕后，为按钮添加事件什么的才起作用。还没弄明白，欢迎大侠指教。