Question

所以，我有这个CSS预加载器工作。但是，我在将此添加到我的网站时遇到了一些困难。有人可以帮助我理解代码的实现，以允许预加载器成为在加载站点之前查看的第一个项目。此时预加载器将淡出。预加载器的代码如下：

 <div class = "container">
    <div id="css-preloader">

    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>

    </div>
    </div>

/ * CSS * /

#.container {
  width: 100%;
}
#css-preloader{
  position:relative;
  width: 100%;
  margin: 10% 0 0 45%;
}
#css-preloader span{
  display: block;
  bottom: 0px;
  width: 5px;
  height: 10px;
  background: #e43632;
  position: absolute;
  animation: preloader_1 2.25s  infinite ease-in-out;
}

#css-preloader span:nth-child(2){
  left: 11px;
  animation-delay: .2s;
}
#css-preloader span:nth-child(3){
  left:22px;
  animation-delay: .4s;
}
#css-preloader span:nth-child(4){
  left:33px;
  animation-delay: .6s;
}
#css-preloader span:nth-child(5){
  left:44px;
  animation-delay: .8s;
}
#css-preloader span:nth-child(6){
  left: 55px;
  animation-delay: 1s;
}
#css-preloader span:nth-child(7){
  left: 66px;
  animation-delay: 1.2s;
}
#css-preloader span:nth-child(8){
  left: 77px;
  animation-delay: 1.4s;
}
### #css-preloader span:nth-child(9){
  left: 88px;
  animation-delay: 1.6s;
}
@keyframes preloader_1 {
###0% {
  height: 10px;
  transform: translateY(0px);
  background: #fdcf01;
 }

25% {
  height: 60px;
  transform: translateY(15px);
  background: #4bb846;
}
50% {
  height: 10px;
  transform: translateY(-10px);
  background:#2988dd;
}  
100% {
  height: 10px;
  transform: translateY(0px);
  background: #e43632;
  }
}

Answer 1

为了造型目的，请不要使用我们ID https://github.com/CSSLint/csslint/wiki/Disallow-IDs-in-selectors
不要将CSS类命名为 .css-preloader 尝试更一般。 CSS中定义的东西必须是CSS，因此不需要前缀。
好的指针 @osmanraifgunes 但我们生活在2016年，所以不需要jQuery来完成这个简单的任务。 window.onload与document.querySelector相结合的简单用法就可以了。一旦DOM完全加载而不是页面上的所有资源，也会触发$（document）.ready。为此我们需要在普通JS中使用window.onload或在jQuery中使用$（window）.load ...
一旦内容完全加载，您只需将CSS类 .hidden 添加到预加载器，而不是使用jQuery hide（），这种方法为您提供了使用的可能性CSS3动画。

我稍微修改了你的代码并添加了JS逻辑，这里是demo：

＆＃13;

window.onload = function() {
  addCls('.preloader', 'hidden');
}

function addCls(selector, cls) {
  var element = document.querySelector(selector);
  element.classList.add(cls);
}

＆＃13;

.container {
  position: relative;
  width: 100%;
}
.container img {
  width: 100%;
}
.holder {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 93px;
  height: 10px;
  margin: -5px 0px 0px -46px;
}
.preloader {
  position: fixed;
  background-color: #ffffff;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 100;
  transition: all 1.5s ease;
}
.preloader.hidden {
  top: -150%;
  opacity: 0;
}
.preloader span {
  display: block;
  width: 5px;
  height: 10px;
  background: #e43632;
  position: absolute;
  animation: preloader-animation 2.25s infinite ease-in-out;
}
.preloader span:nth-child(2) {
  left: 11px;
  animation-delay: .2s;
}
.preloader span:nth-child(3) {
  left: 22px;
  animation-delay: .4s;
}
.preloader span:nth-child(4) {
  left: 33px;
  animation-delay: .6s;
}
.preloader span:nth-child(5) {
  left: 44px;
  animation-delay: .8s;
}
.preloader span:nth-child(6) {
  left: 55px;
  animation-delay: 1s;
}
.preloader span:nth-child(7) {
  left: 66px;
  animation-delay: 1.2s;
}
.preloader span:nth-child(8) {
  left: 77px;
  animation-delay: 1.4s;
}
.preloader span:nth-child(9) {
  left: 88px;
  animation-delay: 1.6s;
}
@keyframes preloader-animation {
  0% {
    height: 10px;
    transform: translateY(0px);
    background: #fdcf01;
  }
  25% {
    height: 60px;
    transform: translateY(15px);
    background: #4bb846;
  }
  50% {
    height: 10px;
    transform: translateY(-10px);
    background: #2988dd;
  }
  100% {
    height: 10px;
    transform: translateY(0px);
    background: #e43632;
  }
}

＆＃13;

<div class="container">
  <img src="https://static.pexels.com/photos/64609/pexels-photo-64609.jpeg" />
  <img src="https://static.pexels.com/photos/8139/pexels-photo.jpg" />
  <img src="https://static.pexels.com/photos/10979/pexels-photo-10979.jpeg" />
  <img src="https://static.pexels.com/photos/24326/pexels-photo-24326.jpg" />
  <div class="preloader">
    <div class="holder">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>
</div>

＆＃13;

Answer 2

设置加载程序99的z-index（应该是页面内最大的z-indexed元素）。

z-index:99;

然后

$(document).ready(function(){
     $('.classOfTheLoader').hide();
});

请注意，需要jquery。

客户CSS预装载器

2 个答案: