JavaScript显示加载器，直到加载下一页内容

问题描述 投票：0回答：1

我有下面的代码，包括一个加载器和一个按钮，每当我点击我的按钮，它将引导用户到另一页。我想要完成的是我希望我的装载机只有在我点击我的按钮后才会显示，并在它转到另一页后消失。有没有一种简单的方法来实现这一目标？非常感谢任何帮助。

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>
javascript jquery html css
1个回答
1
投票

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

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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.