Question

我有一种情况试图在我的主题页面中实现此pulse loader code。

据我所知，不知何故应该有setTimeout (function()已实施，但不太确定如何将其整合到我的js文件中：

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

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

我的实例结果： here;

如果这有帮助，请参阅js文件中的original theme app.min.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之外。

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

1 个答案: