css - 客户 CSS 预加载器

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

1. 请不要将 ID 用于样式目的 https://github.com/CSSLint/csslint/wiki/Disallow-IDs-in-selectors

2. 不要将您的 CSS 类命名为 .css-preloader 尽量通用。在 CSS 中定义的东西必须是 CSS，因此不需要前缀。

3. 很好的建议 @osmanraifgunes 但我们生活在 2016 年，所以不需要 jQuery 来完成这个简单的任务。 window.onload 结合 document.querySelector 的简单使用就可以解决问题。另外 $(document).ready 会在 DOM 完全加载后触发，而不是页面上的所有资源。为此，我们需要在纯 JS 中使用 window.onload 或在 jQuery 中使用 $(window).load...

4. 不使用 jQuery hide()，您可以在内容完全加载后将 CSS 类 .hidden 添加到预加载器...这种方法为您提供了使用的可能性CSS3 动画。

我稍微修改了你的代码并添加了 JS 逻辑，这是演示:

window.onload = function() {
  addCls('.preloader', 'hidden');
}

function addCls(selector, cls) {
  var element = document.querySelector(selector);
  element.classList.add(cls);
}

.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;
  }
}

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