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

我正在使用一个页面加载器，它工作得很好。但我似乎不知道如何在页面加载时隐藏整个页面，除了加载栏，并在加载完成后显示。有什么想法吗？

你不需要隐藏页面。只需制作一个固定的元素，覆盖你的页面而不显示它，然后加载函数使其褪色即可

$(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);
}

---

你可以在容器中添加一个loading.gif或其他内容，当你的页面完全加载时，它将消失。

我知道这是一篇老文章，但我刚才遇到了这个问题，并想出了另一个可能的解决方案：）

Pace文档中隐藏的是Pace.on（）。您可以使用它绑定到文档中列出的事件，如下所示：

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

---

尝试下面的例子简单和容易

查找整页容器div的集合id

FYR:

---

Pace.js实际上是在正文中添加了一个类。”在配速处于活动状态时添加“配速跑步”，完成后替换为配速完成

然后您可以：

.pace-running{
  opacity: .67;
  background-color: #2E2E2E;
}

---

您可以根据自己的需要编辑上述代码。

我知道这个问题已经很老了，但我用一小块CSS就成功地解决了这个问题

.pace-running > *:not(.pace) {
  display: none;
}

---

这利用了页面加载过程中放置在

元素上的类。请注意，这可能会使页面在长时间AJAX请求期间消失。。。您可以通过制作一些Javascript来检查

.pace running

类是否从

元素中删除，从而绕过这个问题。但是，如果您没有任何XHR请求，您应该可以只处理这个问题。

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

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

---

如图所示：没有人在页面上的谷歌地图中引起对齐问题。这非常有效，需要添加一点过渡。

如果您决定不使用不透明度，您可以尝试：

.pace-running {
    background: rgba(250,250,250, 1);
    color: rgba(200,200,200, 1);
}

当Pace.js运行时，减少可见性或隐藏背景页面所需的代码更少

可能与

#pagecontent{}

中的重复，是否应该是

转换

而不是

转换

？

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

.pace-running {
    background: rgba(250,250,250, 1);
    color: rgba(200,200,200, 1);
}