ajax请求加载完成之前给出加载的提示

CSS

.loadingBox{width: 100%;height:100%;position: fixed;border:1px solid rgba(128, 128, 128, 0);top: 0;left: 0}
.loading{width:100%;height:100%;background: rgba(255, 255, 255, 0.36);}
.loading .img{width:100%;height:100%;background:url("${resourceRoot}/ligerUI/skins/Gray/images/ui/loading.gif") no-repeat center;}

HTML 

加载gif的div，默认隐藏

			<div class="loadingBox" style="display: none">
				<div class="loading">
					<div class="img"></div>
				</div>
			</div>

JS

function compareResultView(id) {
			$.ajax({
				url:"",
				type:"post",
				data:"id="+id,
				contentType: "application/x-www-form-urlencoded; charset=UTF-8",
				beforeSend: function(){
					$('.loadingBox').css("display","block");
				},
				success: function (obj) {
					art.dialog({
						lock:true,
						content:obj,
						title: "详情"
					});
					$('.loadingBox').css("display","none");
				}
			});
		}

效果：