如何创建隐藏的CSS加载器，而不是显示body

Question

我想为我的网页创建一个加载程序，但是我不确定在动画加载器显示时如何保持身体隐藏，而不是删除装载机，并在其之后显示身体已完成加载。这是装载机主体的CSS {

 background-color:crimson;
  height:100%;
  width:100%;
}
.one, .two, .three {
  height:25px;
  width:25px;
  background-color:white;
  border-radius:100%;
  float:left;
  margin:5px;
}
.main {
  padding-top:25%;
  padding-left:47%;
}
.one {
  animation-name:dot-one;
  animation-duration:1s;
  animation-iteration-count:infinite;
  animation-delay:0.10s;
}
.two {
  animation-name:dot-two;
  animation-duration:1s;
  animation-iteration-count:infinite;
  animation-delay:0.20s;
}
.three {
  animation-name:dot-three;
  animation-duration:1s;
  animation-iteration-count:infinite;
  animation-delay:0.30s;
}
@keyframes dot-one {
  0% {transform:scale(.5);}
  50% {transform:scale(1);}
  100% {transform:scale(.5);}
}
@keyframes dot-two {
  0% {transform:scale(.5);}
  50% {transform:scale(1);}
  100% {transform:scale(.5);}
}
@keyframes dot-three {
  0% {transform:scale(.5);}
  50% {transform:scale(1);}
  100% {transform:scale(.5);}
}

Answer 1

没有实际代码很难工作。如果您可以使用jQuery，那么我将如何处理它。我会将您的所有内容包装在<div>容器中并隐藏。然后，应将加载图像放置在容器ONE外的另一个<div>内。

加载完整页面和图像后，您可以触发JavaScript功能以隐藏加载图像并显示容器。

$('.content').hide();
  $(window).on("load", function() {
      $('.loader').hide();
      $('.content').show();
  });

body {
      position: relative;
    }
    .content {
      width: 100%;
      height: 100vh;
      display: block;
    }
    .loader {
      position: absolute;
      top: 50px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
        <img src="https://upload.wikimedia.org/wikipedia/commons/4/4e/Pleiades_large.jpg">
  <img src="http://freebigpictures.com/wp-content/uploads/2009/09/hill.jpg">
      </div>
      <div class="loader">
          <img src="https://media4.giphy.com/media/y1ZBcOGOOtlpC/200_s.gif">
      </div>

摘要将加载2个大尺寸图像。在再次运行摘要之前，您应该删除浏览器缓存。希望这有所帮助。