js实现等待效果

我新做的项目，初始加载页面时导入的数据量很大，需要做个等待效果。
我搜到一些代码，就是写个等待的遮盖层，让这个层显示和隐藏。
下面是实现方法
加一个样式
[color=blue] /* 加载等待的遮罩层样式 */
.datagrid-mask {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0.3;
filter:alpha(opacity=20); /* IE 浏览器支持 Opacity代表透明度等级，可选值从0到100，0代表完全透明，100代表完全不透明*/ ;
-moz-opacity:0.4; /* 遨游浏览器 火狐浏览器 支持 */ ;
opacity: 0.4; /* 支持CSS3的浏览器（FF 1.5也支持）*/
display: none;
background:#000;
}
/* 加载等待的样式 */
.datagrid-mask-msg {
position: absolute;
top: 50%;
width: auto;
height: 16px;
margin-top: -20px;
padding: 10px 5px 10px 30px;
border: 5px solid #f6c1bc; /* #f6c1bc; */
color:#000;
display: none;
background: #ffffff url('style/images/public/loading_round.gif') no-repeat scroll 5px center;
}[/color]

jquery实现部分
[color=blue]$.ajax({
url: "Mainloop?mainservice=Getdata&jsscript=mvno/kf/kfyw/tsfw",
type: 'GET',//'GET'--将缓存数据,
dataType: 'xml',
cache:false,
timeout: 31000,
beforeSend:function() {
var h = document.body.clientHeight;
$("<div class=\"datagrid-mask\"></div>").css({display:"block",width:"100%",height:h}).appendTo("body");
$("<div class=\"datagrid-mask-msg\"></div>").html("正在加载数据，请稍候。。。").appendTo("body").css({display:"block",
left:($(document.body).outerWidth(true) - 190) / 2,
top:(h - 45) / 2});

},
complete:function(data) {
$('.datagrid-mask-msg').remove();
$('.datagrid-mask').remove();
},
error: function(){
//alert('Error loading XML document');
},
success: function(xml){
// 实现
}
}); [/color]