如何正确地为脉冲加载器实现 setTimeout 函数 [英] How to properly implement setTimeout function to pulse loader

问题描述

我在尝试实现这个 pulse loader code进入我的主题页面.

I have a situation trying to implement this pulse loader code into my theme pages.

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

As far as I've read, somehow there should be a setTimeout (function() implemented but not so sure how to integrate this into my js file:

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

简而言之，脉冲点，它不会出现在页面内容出现之前，就像我们在这个站点中那样example，它几乎在内容已经加载的同时(为时已晚)显示.

In a few words, the pulse dot, it doesn't show up before the page content appearance, like we have in this site example, it show up in the same time (too late) almost when the content is already loaded.

我的现场示例结果:这里;

如果这有帮助，这里是 原始主题 js 序列来自 app.min.js 文件，应该管理一个 .gif 加载器:

If this helps, here is the original theme js sequence from the app.min.js file, that should manage a .gif loader:

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

我用 .sk-spinner-pulse.sk-spinner 替换了 .loader 结果:

I've replaced .loader with .sk-spinner-pulse.sk-spinner resulting:

...
    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 中我在预加载器部分有:

Also in css I had in the preloader section:

...
#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 中我已经替换了:

In header.php I've replaced:

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

与:

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

有什么想法吗?

推荐答案

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

Use window.onload event to make the animation instead of using a timeout. Example:

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

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

window.onload waits for the document and all it's images to load.

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

The pulse loader should be visible once the document loads, it should be outside your #wrapper div.

这篇关于如何正确地为脉冲加载器实现 setTimeout 函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！