参考文档http://www.htmleaf.com/jQuery/Layout-Interface/201607263781.html
* 载入js:
<script src="jquery/jquery-3.2.1.min.js"></script>
<script src="jquery/jquery.preloader.min.js"><script>
<script type="text/javascript">
$(window).preloader({
delay: 1000
});
</script>
html:
<div id="preloader">
内容
</div>
CSS:
<style>
#preloader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fff;
z-index: 10000;
}
</style>
实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery预加载</title>
<script src="jquery/jquery-3.2.1.min.js"></script>
<script src="jquery/jquery.preloader.min.js"></script>
<style>
#preloader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fff;
z-index: 10000;
}
.spinner { position:relative;
width: 150px; height:50px;
text-align: center;left: 50%;
top: 50%; margin:-25px 0 0 -75px;
}
.spinner > div {
width: 20px;
height: 20px;
background-color: #e6f5fd;
border-radius: 100%;
display: inline-block;
-webkit-animation: bouncedelay 1.4s infinite ease-in-out;
animation: bouncedelay 1.4s infinite ease-in-out;
/* Prevent first frame from flickering when animation starts */
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.spinner .bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.spinner .bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
@-webkit-keyframes bouncedelay {
0%, 80%, 100% { -webkit-transform: scale(0.0) }
40% { -webkit-transform: scale(1.0) }
}
@keyframes bouncedelay {
0%, 80%, 100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
} 40% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}
</style>
</head >
<body>
<div class="announcement">
<p class="p1">
1人收藏
</p>
</div>
<div id="preloader">
<!--css中只要求preloader为fixed,即可实现预加载效果-->
<div class="spinner">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div>
</div>
<!--JS中要求下列代码初始化preloader-->
<script type="text/javascript">
$(window).preloader({
delay: 1000
});
</script>
</body>
</html>