Question

我最近一直致力于一个涉及重载网页的项目，它在后台加载文件，然后最终允许它们在一定时间后消失，

我尽最大努力做一些研究，但经过多次尝试，我还没有得出有用的结论。如果你能帮到我，我会爱上它的，我可能稍后会编辑我的代码但是现在我只是使用codepen.io过度使用加载方块，以获取您的信息。如果你能提供帮助，我们将非常感激，这是我的代码。

HTML

<!DOCTYPE html>
<html>
<head>

<style>html { overflow-y: hidden; }</style>
<link rel="stylesheet" type="text/css" href="css/style.css">
    <script type="text/javascript">
        s$("div.formSentMsg").delay(3200).fadeOut(300) 
    </script>


    <div><center><i><p>Loading</p></i></center></div>



  <meta charset="UTF-8">
  <title>Loading Square</title>



  <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>

<body>
  <div><span class="loader"><span class="loader-inner"></span></span></div>


</body>
</html>

的CSS

body, html {
    height: 100%;
    text-align: center;
}

body {
  background-color: #edae38;
}
.loader {
        display: inline-block;
        width: 80px;
        height: 80px;
        position: relative;
        border: 8px solid #3a3b3d;
        animation: loader 4s infinite ease;
        align-self: center;
        box-shadow: 0px 0px 7px #3a3b3d;



}

.loader-inner {
  vertical-align: top;
  display: inline-block;
  width: 100%;
  background-color: #3a3b3d;
  animation: loader-inner 4s infinite ease-in;
  box-shadow: 0px 0px 2px #3a3b3d;
}

@keyframes loader {
  0% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(90deg);
  }

  50% {
    transform: rotate(180deg);
  }

  75% {
    transform: rotate(270deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes loader-inner {
  0% {
    height: 100%;
  }

  25% {
    height: 0%;
  }

  50% {
    height: 100%;
  }

  75% {
    height: 0%;
  }

  100% {
    height: 100%;
  }
}
 p {
    font-family: 'bignoodletitling';
    top: 50px;
    padding-bottom: 1px;
    padding-top: 200px;
    color: #3a3b3d;
    font-size: 110px;
    text-align: center;
    text-shadow: 0px 0px 3px #3a3b3d;
    }

我明白了，

您可能很容易实现这一点，但是当我收到您的输入时，我非常感激，这有助于我学习将来的参考资料，谢谢。 - 大卫

Answer 1

一旦加载了所有资产，只需删除包含加载内容的元素。我给了loading元素一个ID（#loadingEl），并使用jQuery将其删除$(window).on('load'...

body,
html {
  height: 100%;
  text-align: center;
}

body {
  background-color: #edae38;
}

.loader {
  display: inline-block;
  width: 80px;
  height: 80px;
  position: relative;
  border: 8px solid #3a3b3d;
  animation: loader 4s infinite ease;
  align-self: center;
  box-shadow: 0px 0px 7px #3a3b3d;
}

.loader-inner {
  vertical-align: top;
  display: inline-block;
  width: 100%;
  background-color: #3a3b3d;
  animation: loader-inner 4s infinite ease-in;
  box-shadow: 0px 0px 2px #3a3b3d;
}

@keyframes loader {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(90deg);
  }
  50% {
    transform: rotate(180deg);
  }
  75% {
    transform: rotate(270deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes loader-inner {
  0% {
    height: 100%;
  }
  25% {
    height: 0%;
  }
  50% {
    height: 100%;
  }
  75% {
    height: 0%;
  }
  100% {
    height: 100%;
  }
}

p {
  font-family: 'bignoodletitling';
  top: 50px;
  padding-bottom: 1px;
  padding-top: 200px;
  color: #3a3b3d;
  font-size: 110px;
  text-align: center;
  text-shadow: 0px 0px 3px #3a3b3d;
}

<!DOCTYPE html>
<html>

<head>

  <style>
    html { overflow-y: hidden; }
  </style>
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script type="text/javascript">
    $("div.formSentMsg").delay(3200).fadeOut(300);
  </script>


  <div>
    <center><i><p>Loading</p></i></center>
  </div>


  <meta charset="UTF-8">
  <title>Loading Square</title>


  <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>

<body>
  <div id="loadingEl"><span class="loader"><span class="loader-inner"></span></span>
  </div>

  <script>
    $(window).on('load',function() {
      $('#loadingEl').remove();
    })
  </script>

</body>

</html>

不确定如何使加载屏幕消失？

1 个答案: