比较常见的做法，但对我而言是第一次做，记录一下。
为了把找来的loading.gif 的背景色设置为透明，还特意装了quicktime。
有学到一些额外的东西。
先将div及img定义好
<body>
<div id="loadingDiv">
<img src="loading.gif" style="margin-top:230px;margin-left:700px;" />
</div>
</body>
注意：在img内可以用margin-top 和 margin-left 将loading的图片调整到列表正中央。
css样式(重点)
#loadingDiv {
background-color:grey;
filter: alpha(opacity=50); <!--IE的透明度-->
opacity: 0.1;<!--透明度，数值越大越透明，不要调太小，不然gif图片会特别模糊-->
display: none;
position: absolute;
top: 0px;
left: 0px;
100%;
height: 100%;
z-index: 100; <!--此处的图层要大于页面-->
display:none;
}
注意：此处用的id样式，页面初始化即启用，且已在样式内将该div设置为不显示。
之后将在js内动态调整它的隐藏与显示属性。当它显示时，将会遮盖住整个body，
用户无法对页面进行任何操作。
javascript代码：
function loadData(){
//弹出遮盖层
$("#loadingDiv").fadeTo(200,0.5);
$.ajax({
url: 'xx/xx!query.action',
dataType:"json",
type: 'POST',
success: function(data) {
//此处是加载列表数据的代码
//数据加载完毕，则关闭遮盖层
$("#loadingDiv").fadeOut(200);
}
});
}
注意：这里用了fadeTo和fadeOut来显示和隐藏div，当然也可以用 show 和 hide。