Question

我将这个脉冲加载器代码实现到wordpress主题中（特别感谢@dcardoso），如下所示：

在dcardoso.js注册的

script-calls.php文件：

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

在主题app.min.js文件中，此序列为：

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

同样在app.css，预加载器部分：

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

主要目标是在内容之前/之后保持脉冲加载器淡出背景，logotext <div class="small-7 medium-4 columns logo">和菜单<nav class="pagedMenu" role="navigation">之上正在加载到页面中。

我试图修改z-index值，但没有任何好结果，我认为还有更多。在这一点上，我想知道，最好的方法是什么？

Here是一个功能示例，此处为my site链接。请忽略ajaxify行为不端，只需按F5查看装载程序;实际上我正在寻找一种解决方法（不是在页面刷新 - 我确信这一点）到this question。

有什么想法？我很感激。

如何将元素保存在加载器的顶部

0 个答案: