<html>
<head>
<meta charset="UTF-8">
<link href="./loading.css" rel="stylesheet" type="text/css"/>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<button onclick="test()">测试加载loading</button>
<script>
function test(){
ajaxLoading('数据处理中,请稍后...');
setTimeout(function(){
ajaxLoadEnd()
},2000);
}
//使用loading效果
function ajaxLoading(msg){
addPanelMask();
$("<div class='datagrid-mask-msg'></div>").html(msg ? msg : "正在处理,请稍候...").appendTo("body").css({
"display":"block",
"z-index":99999,
"left":($(document.body).outerWidth(true) - 190) / 2,
"top":($(window).height() - 45) / 2
});
}
//遮罩整个界面
function addPanelMask(){
$("<div class='datagrid-mask'></div>").appendTo("body").css({
"display":"block",
"z-index":9999,
"width":"100%",
"height":$(window).height()
});
}
//移除界面遮罩层
function ajaxLoadEnd(){
$(".datagrid-mask").remove();
$(".datagrid-mask-msg").remove();
}
</script>
</body>
</html>
css样式文件
.datagrid-mask {
background: #ccc;
position: absolute;
left: 0;
top: 0;
}
.datagrid-mask-msg {
border-color: #D3D3D3;
position: absolute;
margin-top: -20px;
padding: 10px 5px 10px 30px;
width: auto;
height: 16px;
border-width: 2px;
border-style: solid;
background: #ffffff url(images/loading.gif) no-repeat scroll 5px center;
}
引入的loading的图片
效果: