我要当用户单击我的project.so我通过包含一个提交按钮创建一个示例页面的登录按钮添加页面预加载。通过使用CSS以及JavaScript函数来执行微调＆淡出出来，并加载其他页面调用welcome.html创造了一个微调的预加载
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="overlay"> <div class="spinner"></div>
</div>
<input type="submit" name="click me" id="submit">
**here is the javascript function**
<script>
(function(){
var spinner =document.getElementById("spinner");
var loading = 0;
var id = setInterval(frame,20);
function frame(){
if(loading==100){
clearInterval(id);
window.open("welcome.html","_self");
} else {
loading = loading + 1;
if(loading==90){
spinner.style.animation ="fadeout 1s ease";
}
}
}
})();
</script>
</body>
</html>
**here is the style sheet for preloader**
.overlay{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ff6347;
z-index: -999;
}
.spinner {
position: fixed;
top: 33%;
left: 48%;
width: 60px;
height: 60px;
background-color: black;
-webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
animation: sk-rotateplane 1.2s infinite ease-in-out;
}
**here is the keyframe code for fadeout**
@keyframes fadeout {
from {opacity: 1;}
to{opacity: 0;}
}
}
@-webkit-keyframes sk-rotateplane {
0% { -webkit-transform: perspective(120px) }
50% { -webkit-transform: perspective(120px) rotateY(180deg) }
100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) }
}
@keyframes sk-rotateplane {
0% {
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
} 50% {
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
} 100% {
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
}
}
我需要的是，用户点击该按钮，然后显示预加载。但事实是，当我运行页面按钮会出现在同一时间微调预加载无需点击按钮，加载welcome.html页面打开后，正在运行。
你应该首先隐藏微调和加载启动时只显示它。所以，你可以在相框功能改变是这样的：
function loading(){
if(loading==0) {
spinner.classList.add('active');
} else if(loading==100){
clearInterval(id);
window.open("welcome.html","_self");
spinner.classList.remove('active');
} else {
loading = loading + 1;
if(loading==90){
spinner.style.animation ="fadeout 1s ease";
}
}
}
你也可以添加某种点击收听到提交按钮，而不是设置的时间间隔检查在页面加载每隔20毫秒已经，这似乎是不必要的。
然后在你的CSS改变这样的：
.spinner {
display: none;
position: fixed;
top: 33%;
left: 48%;
width: 60px;
height: 60px;
background-color: black;
-webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
animation: sk-rotateplane 1.2s infinite ease-in-out;
}
.spinner.active {
display: block
}
先加
.overlay{
display:none;
}
在CSS，然后点击功能的提交按钮添加
document.getElementById("overlayId").style.display = "block";
如果您正在使用的JavaScript
和
$(".overlay").css("display", "block");
如果你正在使用jQuery
N.B：overlayId是叠加的标识DIV