部分内容的预加载器

Question

我在 wordpress 网站上有 css 预加载器，并且我需要预加载器只隐藏部分内容。现在预加载器隐藏了整个页面。例子： - 网站标题 - 网站菜单 - 内容（需要隐藏） - 页脚

在header.php中：

https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js

$(window).load(function() {
 $(".cssload-loader").delay(1300).fadeOut();
 $(".preloader").delay(1400).fadeOut("slow");
})

.preloader  {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-color: #fff;
     z-index: 100501;
    height: 100%;
 width: 100%;
 }

.cssload-loader {
 position: absolute;
 left: 50%;
 top: 50%;
 width: 34.284271247462px;
 height: 34.284271247462px;
 margin-left: -17.142135623731px;
 margin-top: -17.142135623731px;
 border-radius: 100%;
 animation-name: cssload-loader;
  -o-animation-name: cssload-loader;
  -ms-animation-name: cssload-loader;
  -webkit-animation-name: cssload-loader;
  -moz-animation-name: cssload-loader;
 animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  -ms-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
 animation-timing-function: linear;
  -o-animation-timing-function: linear;
  -ms-animation-timing-function: linear;
  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function: linear;
 animation-duration: 2.8s;
  -o-animation-duration: 2.8s;
  -ms-animation-duration: 2.8s;
  -webkit-animation-duration: 2.8s;
  -moz-animation-duration: 2.8s;
}
.cssload-loader .cssload-side {
 display: block;
 width: 4px;
 height: 14px;
 background-color: rgba(0,0,0,0.81);
 margin: 1px;
 position: absolute;
 border-radius: 50%;
 animation-duration: 1.045s;
  -o-animation-duration: 1.045s;
  -ms-animation-duration: 1.045s;
  -webkit-animation-duration: 1.045s;
  -moz-animation-duration: 1.045s;
 animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  -ms-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
 animation-timing-function: ease;
  -o-animation-timing-function: ease;
  -ms-animation-timing-function: ease;
  -webkit-animation-timing-function: ease;
  -moz-animation-timing-function: ease;
}
.cssload-loader .cssload-side:nth-child(1),
.cssload-loader .cssload-side:nth-child(5) {
 transform: rotate(0deg);
  -o-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
 animation-name: cssload-rotate0;
  -o-animation-name: cssload-rotate0;
  -ms-animation-name: cssload-rotate0;
  -webkit-animation-name: cssload-rotate0;
  -moz-animation-name: cssload-rotate0;
}
.cssload-loader .cssload-side:nth-child(3),
.cssload-loader .cssload-side:nth-child(7) {
 transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
 animation-name: cssload-rotate90;
  -o-animation-name: cssload-rotate90;
  -ms-animation-name: cssload-rotate90;
  -webkit-animation-name: cssload-rotate90;
  -moz-animation-name: cssload-rotate90;
}
.cssload-loader .cssload-side:nth-child(2),
.cssload-loader .cssload-side:nth-child(6) {
 transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
 animation-name: cssload-rotate45;
  -o-animation-name: cssload-rotate45;
  -ms-animation-name: cssload-rotate45;
  -webkit-animation-name: cssload-rotate45;
  -moz-animation-name: cssload-rotate45;
}
.cssload-loader .cssload-side:nth-child(4),
.cssload-loader .cssload-side:nth-child(8) {
 transform: rotate(135deg);
  -o-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
 animation-name: cssload-rotate135;
  -o-animation-name: cssload-rotate135;
  -ms-animation-name: cssload-rotate135;
  -webkit-animation-name: cssload-rotate135;
  -moz-animation-name: cssload-rotate135;
}
.cssload-loader .cssload-side:nth-child(1) {
 top: 17.142135623731px;
 left: 34.284271247462px;
 margin-left: -2px;
 margin-top: -7px;
 animation-delay: 0;
  -o-animation-delay: 0;
  -ms-animation-delay: 0;
  -webkit-animation-delay: 0;
  -moz-animation-delay: 0;
}
.cssload-loader .cssload-side:nth-child(2) {
 top: 29.213203431093px;
 left: 29.213203431093px;
 margin-left: -2px;
 margin-top: -7px;
 animation-delay: 0;
  -o-animation-delay: 0;
  -ms-animation-delay: 0;
  -webkit-animation-delay: 0;
  -moz-animation-delay: 0;
}
.cssload-loader .cssload-side:nth-child(3) {
 top: 34.284271247462px;
 left: 17.142135623731px;
 margin-left: -2px;
 margin-top: -7px;
 animation-delay: 0;
  -o-animation-delay: 0;
  -ms-animation-delay: 0;
  -webkit-animation-delay: 0;
  -moz-animation-delay: 0;
}
.cssload-loader .cssload-side:nth-child(4) {
 top: 29.213203431093px;
 left: 5.0710678163691px;
 margin-left: -2px;
 margin-top: -7px;
 animation-delay: 0;
  -o-animation-delay: 0;
  -ms-animation-delay: 0;
  -webkit-animation-delay: 0;
  -moz-animation-delay: 0;
}
.cssload-loader .cssload-side:nth-child(5) {
 top: 17.142135623731px;
 left: 0px;
 margin-left: -2px;
 margin-top: -7px;
 animation-delay: 0;
  -o-animation-delay: 0;
  -ms-animation-delay: 0;
  -webkit-animation-delay: 0;
  -moz-animation-delay: 0;
}
.cssload-loader .cssload-side:nth-child(6) {
 top: 5.0710678163691px;
 left: 5.0710678163691px;
 margin-left: -2px;
 margin-top: -7px;
 animation-delay: 0;
  -o-animation-delay: 0;
  -ms-animation-delay: 0;
  -webkit-animation-delay: 0;
  -moz-animation-delay: 0;
}
.cssload-loader .cssload-side:nth-child(7) {
 top: 0px;
 left: 17.142135623731px;
 margin-left: -2px;
 margin-top: -7px;
 animation-delay: 0;
  -o-animation-delay: 0;
  -ms-animation-delay: 0;
  -webkit-animation-delay: 0;
  -moz-animation-delay: 0;
}
.cssload-loader .cssload-side:nth-child(8) {
 top: 5.0710678163691px;
 left: 29.213203431093px;
 margin-left: -2px;
 margin-top: -7px;
 animation-delay: 0;
  -o-animation-delay: 0;
  -ms-animation-delay: 0;
  -webkit-animation-delay: 0;
  -moz-animation-delay: 0;
}

@keyframes cssload-rotate0 {
 0% {
  transform: rotate(0deg);
 }
 60% {
  transform: rotate(180deg);
 }
 100% {
  transform: rotate(180deg);
 }
}

@-o-keyframes cssload-rotate0 {
 0% {
  -o-transform: rotate(0deg);
 }
 60% {
  -o-transform: rotate(180deg);
 }
 100% {
  -o-transform: rotate(180deg);
 }
}

@-ms-keyframes cssload-rotate0 {
 0% {
  -ms-transform: rotate(0deg);
 }
 60% {
  -ms-transform: rotate(180deg);
 }
 100% {
  -ms-transform: rotate(180deg);
 }
}

@-webkit-keyframes cssload-rotate0 {
 0% {
  -webkit-transform: rotate(0deg);
 }
 60% {
  -webkit-transform: rotate(180deg);
 }
 100% {
  -webkit-transform: rotate(180deg);
 }
}

@-moz-keyframes cssload-rotate0 {
 0% {
  -moz-transform: rotate(0deg);
 }
 60% {
  -moz-transform: rotate(180deg);
 }
 100% {
  -moz-transform: rotate(180deg);
 }
}

@keyframes cssload-rotate90 {
 0% {
  transform: rotate(90deg);
      transform: rotate(90deg);
 }
 60% {
  transform: rotate(270deg);
      transform: rotate(270deg);
 }
 100% {
  transform: rotate(270deg);
      transform: rotate(270deg);
 }
}

@-o-keyframes cssload-rotate90 {
 0% {
  -o-transform: rotate(90deg);
      transform: rotate(90deg);
 }
 60% {
  -o-transform: rotate(270deg);
      transform: rotate(270deg);
 }
 100% {
  -o-transform: rotate(270deg);
      transform: rotate(270deg);
 }
}

@-ms-keyframes cssload-rotate90 {
 0% {
  -ms-transform: rotate(90deg);
      transform: rotate(90deg);
 }
 60% {
  -ms-transform: rotate(270deg);
      transform: rotate(270deg);
 }
 100% {
  -ms-transform: rotate(270deg);
      transform: rotate(270deg);
 }
}

@-webkit-keyframes cssload-rotate90 {
 0% {
  -webkit-transform: rotate(90deg);
      transform: rotate(90deg);
 }
 60% {
  -webkit-transform: rotate(270deg);
      transform: rotate(270deg);
 }
 100% {
  -webkit-transform: rotate(270deg);
      transform: rotate(270deg);
 }
}

@-moz-keyframes cssload-rotate90 {
 0% {
  -moz-transform: rotate(90deg);
      transform: rotate(90deg);
 }
 60% {
  -moz-transform: rotate(270deg);
      transform: rotate(270deg);
 }
 100% {
  -moz-transform: rotate(270deg);
      transform: rotate(270deg);
 }
}

@keyframes cssload-rotate45 {
 0% {
  transform: rotate(45deg);
      transform: rotate(45deg);
 }
 60% {
  transform: rotate(225deg);
      transform: rotate(225deg);
 }
 100% {
  transform: rotate(225deg);
      transform: rotate(225deg);
 }
}

@-o-keyframes cssload-rotate45 {
 0% {
  -o-transform: rotate(45deg);
      transform: rotate(45deg);
 }
 60% {
  -o-transform: rotate(225deg);
      transform: rotate(225deg);
 }
 100% {
  -o-transform: rotate(225deg);
      transform: rotate(225deg);
 }
}

@-ms-keyframes cssload-rotate45 {
 0% {
  -ms-transform: rotate(45deg);
      transform: rotate(45deg);
 }
 60% {
  -ms-transform: rotate(225deg);
      transform: rotate(225deg);
 }
 100% {
  -ms-transform: rotate(225deg);
      transform: rotate(225deg);
 }
}

@-webkit-keyframes cssload-rotate45 {
 0% {
  -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
 }
 60% {
  -webkit-transform: rotate(225deg);
      transform: rotate(225deg);
 }
 100% {
  -webkit-transform: rotate(225deg);
      transform: rotate(225deg);
 }
}

@-moz-keyframes cssload-rotate45 {
 0% {
  -moz-transform: rotate(45deg);
      transform: rotate(45deg);
 }
 60% {
  -moz-transform: rotate(225deg);
      transform: rotate(225deg);
 }
 100% {
  -moz-transform: rotate(225deg);
      transform: rotate(225deg);
 }
}

@keyframes cssload-rotate135 {
 0% {
  transform: rotate(135deg);
      transform: rotate(135deg);
 }
 60% {
  transform: rotate(315deg);
      transform: rotate(315deg);
 }
 100% {
  transform: rotate(315deg);
      transform: rotate(315deg);
 }
}

@-o-keyframes cssload-rotate135 {
 0% {
  -o-transform: rotate(135deg);
      transform: rotate(135deg);
 }
 60% {
  -o-transform: rotate(315deg);
      transform: rotate(315deg);
 }
 100% {
  -o-transform: rotate(315deg);
      transform: rotate(315deg);
 }
}

@-ms-keyframes cssload-rotate135 {
 0% {
  -ms-transform: rotate(135deg);
      transform: rotate(135deg);
 }
 60% {
  -ms-transform: rotate(315deg);
      transform: rotate(315deg);
 }
 100% {
  -ms-transform: rotate(315deg);
      transform: rotate(315deg);
 }
}

@-webkit-keyframes cssload-rotate135 {
 0% {
  -webkit-transform: rotate(135deg);
      transform: rotate(135deg);
 }
 60% {
  -webkit-transform: rotate(315deg);
      transform: rotate(315deg);
 }
 100% {
  -webkit-transform: rotate(315deg);
      transform: rotate(315deg);
 }
}

@-moz-keyframes cssload-rotate135 {
 0% {
  -moz-transform: rotate(135deg);
      transform: rotate(135deg);
 }
 60% {
  -moz-transform: rotate(315deg);
      transform: rotate(315deg);
 }
 100% {
  -moz-transform: rotate(315deg);
      transform: rotate(315deg);
 }
}

@keyframes cssload-loader {
 0% {
  transform: rotate(0deg);
      transform: rotate(0deg);
 }
 100% {
  transform: rotate(360deg);
      transform: rotate(360deg);
 }
}

@-o-keyframes cssload-loader {
 0% {
  -o-transform: rotate(0deg);
      transform: rotate(0deg);
 }
 100% {
  -o-transform: rotate(360deg);
      transform: rotate(360deg);
 }
}

@-ms-keyframes cssload-loader {
 0% {
  -ms-transform: rotate(0deg);
      transform: rotate(0deg);
 }
 100% {
  -ms-transform: rotate(360deg);
      transform: rotate(360deg);
 }
}

@-webkit-keyframes cssload-loader {
 0% {
  -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
 }
 100% {
  -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
 }
}

@-moz-keyframes cssload-loader {
 0% {
  -moz-transform: rotate(0deg);
      transform: rotate(0deg);
 }
 100% {
  -moz-transform: rotate(360deg);
      transform: rotate(360deg);
 }
}

<div class="preloader"> 
 <div class="cssload-loader">
 <div class="cssload-side"></div>
 <div class="cssload-side"></div>
 <div class="cssload-side"></div>
 <div class="cssload-side"></div>
 <div class="cssload-side"></div>
 <div class="cssload-side"></div>
 <div class="cssload-side"></div>
 <div class="cssload-side"></div>
 </div>
 </div>

Here is my site so you can see the page code

我想我需要脚本来显示站点标题和菜单，或者我需要更改 css 样式来隐藏内容？

Answer 1

像下面这样更改 CSS。

.preloader {
    position: fixed;
    background-color: #fff;
    z-index: 107;
    height: 100%;
    width: 100%;
}

然后像这样将预加载器元素放在内容 div 中。

<div class="col-md-8 col-md-offset-2">
    <div class="preloader" style="display: block;"> 
      <div class="cssload-loader" style="display: none;">
        <div class="cssload-side"></div>
        <div class="cssload-side"></div>
        <div class="cssload-side"></div>
        <div class="cssload-side"></div>
        <div class="cssload-side"></div>
        <div class="cssload-side"></div>
        <div class="cssload-side"></div>
        <div class="cssload-side"></div>
     </div>
   </div>

   <article>....  Article content .....</article>
</div>

部分内容的预加载器

Preloader for part of content

javascript

css

wordpress

jquery

preloader