使用pace.js加载时隐藏页面

Question

我正在使用pace,一个页面加载器,它工作正常.但我似乎无法弄清楚如何在页面加载时隐藏整个页面,除了加载栏,并在加载完成后显示它.有任何想法吗？

Answer 1

我知道这是一个老帖子,但我刚刚遇到这个问题,并想出了另一个可能的解决方案:)

Pace文档中隐藏的是Pace.on().您可以使用它绑定到文档中列出的事件,如下所示:

Pace.on("done", function(){
    $(".cover").fadeOut(2000);
});

Answer 2

我使用以下代码解决了这个问题.

.pace-running > *:not(.pace) {
  opacity:0;
}

as display:none导致页面上谷歌地图中的对齐问题.这非常有效,需要为此添加一些过渡.

Answer 3

您无需隐藏页面.只需制作一个覆盖页面的固定元素而不显示它,然后通过加载函数淡化它.

$(window).load(function() {
        $(".cover").fadeOut(2000);
    })

.cover {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 1999;
    background:rgb(33,33,33);
}

并且您可以向容器添加.gif或其他东西,当您的页面完全加载时它将消失.