Question

我下面的代码包含一个加载器和一个按钮，每当我单击我的按钮时，它会将用户定向到另一个页面。我要完成的工作是，我希望加载器仅在单击按钮时显示，然后在转到另一页后消失。有没有简单的方法可以做到这一点？任何帮助将不胜感激。

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>

Answer 1

首次加载页面时，您需要将显示设置为无，以隐藏加载器。然后，在调用lol函数之后，您第一次需要做的就是通过将显示更改为block来显示加载程序。这样，在重定向到另一个页面之前，您的加载器就会显示出来。

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显示加载器，直到加载下一页内容

1 个答案: