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函数来隐藏加载图像并显示容器。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

该代码段将加载2张大尺寸图片。您应该在再次运行代码段之前删除浏览器缓存。希望这有帮助。

如何创建一个隐藏的css加载器，而不是显示正文

1 个答案: