我在下面有这段代码，它包含一个加载程序和一个按钮，每当我单击我的按钮时，它都会将用户定向到另一个页面。我想要完成的是我希望我的加载程序仅在我单击我的按钮时显示并在它转到另一页后消失。有没有简单的方法可以做到这一点？非常感谢任何帮助。
function lol() {
window.location.href = "video.html";
}
var overlay = document.getElementById("transparent");
document.getElementById("uploadbtn").addEventListener("click", loader);
function loader() {
}.loader {
border: 10px solid #f3f3f3;
border-radius: 50%;
border-top: 10px solid #05788C;
border-bottom: 10px solid #05788C;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
display: inline-block;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#transparent {
height: 100%;
width: 100%;
background: rgba(0, 0, 0, 0.8);
position: fixed;
left: 0;
top: 0;
}<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="//#" />
</head>
<body>
<div id="transparent">
<div class="loader"></div>
<button id="uploadbtn" type="button" onclick="lol();">Click Me!</button>
</div>
</body>
</html>最佳答案
您需要在首次加载页面时通过将显示设置为无来隐藏加载程序。那么在调用lol函数后，首先需要做的就是将显示改为block来显示loader。这样，在重定向到另一个页面之前，您的加载程序就会出现。
function lol() {
document.getElementsByClassName('loader')[0].style.display = 'block';
window.location.href = "video.html";
}.loader {
border: 10px solid #f3f3f3;
border-radius: 50%;
border-top: 10px solid #05788C;
border-bottom: 10px solid #05788C;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
display: inline-block;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#transparent {
height: 100%;
width: 100%;
background: rgba(0, 0, 0, 0.8);
position: fixed;
left: 0;
top: 0;
}<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="//#" />
</head>
<body>
<div id="transparent">
<div class="loader" style="display:none"></div>
<button type="button" onclick="lol();">Click Me!</button>
</div>
</body>
</html>关于JavaScript 显示加载程序直到加载下一页内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51256294/