<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
background-color: #4cae4c;
width:700px;
height:600px;
}
.preloader{
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
z-index:999;
height:100%;
width:100%;
background-color: #fefefe;
overflow: hidden !important;
}
.loaded{
width:60px;
height:60px;
position:absolute;
top:50%;
left:50%;
margin-top:-30px; /*高度的一半*/
margin-left:-30px;/*宽度的一半*/
background-image: url('assets/images/loading.gif');
background-repeat:no-repeat;
background-position: center;
-moz-background-size: cover;
background-size: cover;
}
</style>
</head>
<body>
<div class="preloader">
<div class="loaded"></div>
</div>
<div class="box">我是遮罩层下面的内容</div>
</body>
<script>
/**利用js*页面加载完毕，关闭遮罩层***/
jQuery(document).ready(function ($) {
$(window).load(function () {
$(".loaded").fadeOut();
$(".preloader").delay(1000).fadeOut("slow");
});
});
</script>
</html>
