如何创建一个隐藏而不是显示主体的 css 加载器

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> 容器中并将其隐藏。然后，加载图像应放置在容器外的另一个 <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 张大尺寸图片。您应该再次删除运行代码段之前的浏览器缓存。希望对您有所帮助。

如何创建一个隐藏而不是显示主体的 css 加载器

How to create a css loader that hides, than shows the body

html

css

frontend

css-loader