如何正确实现脉冲加载器的 setTimeout 函数

Question

我有一种情况试图在我的主题页面中实现这个pulse loadercode。

据我所知，不知何故应该有一个 setTimeout (function() 实现但不太确定如何将它集成到我的 js 文件中：

jQuery(document).ready(function(){ 
    setTimeout(function(){
        $("div.loader").fadeOut( 500, function(){
            $("div#content").fadeIn( 3000);
        });
      }, 2500);
    });

简而言之，脉冲点，它不会在页面内容出现之前出现，就像我们在这个网站example 一样，它几乎在内容出现的同时（为时已晚）出现已经加载。

我的实时示例结果： here;

如果这有帮助，这里是来自app.min.js 文件的original theme js 序列，它应该管理一个.gif 加载器：

...
    var $doc = $(document), win = $(window), Modernizr = window.Modernizr, AnimationsArray = [];
    window.SITE = {
        init: function() {
            var self = this, content = $("#wrapper"), pl = content.find(">.preloader"), count = $("body").data("cart-count");
            favicon = new Favico({
                bgColor: "#151515",
                textColor: "#fff"
            }), favicon.badge(count), content.waitForImages(function() {
                TweenMax.to(pl, 1, {
                    autoAlpha: 0,
                    ease: Quart.easeOut,
                    onComplete: function() {
                        pl.css("display", "none");
                    }
                }); 
...        

我已将 .loader 替换为 .sk-spinner-pulse.sk-spinner 结果：

...
    var $doc = $(document), win = $(window), Modernizr = window.Modernizr, AnimationsArray = [];
    window.SITE = {
        init: function() {
            var self = this, content = $("#wrapper"), pl = content.find(">.sk-spinner-pulse.sk-spinner"), count = $("body").data("cart-count");
            favicon = new Favico({
                bgColor: "#151515",
                textColor: "#fff"
            }), favicon.badge(count), content.waitForImages(function() {
                TweenMax.to(pl, 1, {
                    autoAlpha: 0,
                    ease: Quart.easeOut,
                    onComplete: function() {
                        pl.css("display", "none");
                    }
                }); 
...

还有css我在预加载器部分：

...
#wrapper .preloader {
  position: fixed;
  z-index: 998;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 80px 60px 0;
  background: #f9f9f9 url("../img/preloader.gif") center center no-repeat;
  -moz-background-size: 55px 55px;
  -o-background-size: 55px 55px;
  -webkit-background-size: 55px 55px;
  background-size: 55px 55px;
}
.site_bars_off #wrapper .preloader {
  margin-left: 0;
  margin-right: 0;
}
.site_bars_off #wrapper .preloader {
  margin-left: 0;
  margin-right: 0;
}
@media only screen and (max-width: 40.063em) {
  #wrapper .preloader {
    margin-left: 0;
    margin-right: 0;
  }
}
...

修改如下：

...
#wrapper .sk-spinner-pulse.sk-spinner {
  left: 50%;
  position: fixed;
  top: 50%;
  width: 45px;
  height: 45px;
  margin: 0 auto;
  background-color: gold;
  border-radius: 100%;
  -webkit-animation: sk-pulseScaleOut 1s infinite ease-in-out;
  animation: sk-pulseScaleOut 1s infinite ease-in-out;
}

@-webkit-keyframes sk-pulseScaleOut {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}
@keyframes sk-pulseScaleOut {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}

.site_bars_off #wrapper .sk-spinner-pulse.sk-spinner {
  margin-left: 0;
  margin-right: 0;
}
.site_bars_off #wrapper .sk-spinner-pulse.sk-spinner {
  margin-left: 0;
  margin-right: 0;
}
@media only screen and (max-width: 40.063em) {
  #wrapper .sk-spinner-pulse.sk-spinner {
    margin-left: 0;
    margin-right: 0;
  }
}
...

在header.php我已经替换了：

...
<!-- Start Loader -->
<div class="preloader"></div>
<!-- End Loader -->
...

与：

...
<!-- Start Loader -->
<div class="sk-spinner sk-spinner-pulse"></div>
<!-- End Loader -->
...

有什么想法吗？

Answer 1

使用 window.onload 事件来制作动画，而不是使用超时。示例：

jQuery(function($){ 
    $(window).load(function(){ 
        $(".sk-spinner-pulse").fadeOut(500);
        $("#wrapper").css("opacity","1");
    });
});

window.onload 等待加载文档及其所有图像。

文档加载后，脉冲加载器应该是可见的，它应该在你的#wrapper div之外。