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或者其他东西，当你的页面满载时它会消失。

Answer 4

我知道这个问题相当陈旧，但我设法使用了一小块CSS。

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

这利用了PACE在页面加载过程中放置在<body>元素上的类。请注意，这可能会使页面在长期AJAX请求期间消失...您可以通过制作一些Javascript来检查要从.pace-running元素中删除的<body>类来解决这个问题。但是，如果您没有任何XHR请求，那么您应该没问题。

Answer 5

Pace.js实际上为身体添加了一个类。在步伐活跃时添加“步速运行”，在完成时替换为步速完成。

你可以确定css：

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

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

Answer 6

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

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

在Pace.js运行时降低可见性或隐藏背景页面所需的代码较少

Answer 7

尝试以下示例简单易用....

查找整页容器div的设置ID

<body>
    <div id="pagecontent">
        Loaded asdasdas das das
        dasd
        asd
        asdasdasdasdasdasdasdasdasd

    </div>
</body>

放入此css后，基于您在整个容器ID中提到的内容

#pagecontent {
    opacity: 0;
}

#pagecontent {
                    -webkit-transform: opacity 0.5s ease;
                    -moz-transform: opacity 0.5s ease;
                    -o-transform: opacity 0.5s ease;
                    -ms-transform: opacity 0.5s ease;
                    transform: opacity 0.5s ease;
}

body.pace-running #pagecontent {
    opacity: 0;
}
body.pace-done #pagecontent {
    opacity: 1;
}

.pace {
  -webkit-pointer-events: none;
  pointer-events: none;

  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;

  z-index: 2000;
  position: fixed;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5px;
  width: 200px;
  background: #fff;
  border: 1px solid #f2851f;

  overflow: hidden;
}

.pace .pace-progress {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;

  -webkit-transition: translate3d(0, 0, 0);
  -moz-transition: translate3d(0, 0, 0);
  -ms-transition: translate3d(0, 0, 0);
  -o-transition: translate3d(0, 0, 0);
  transition: translate3d(0, 0, 0);

  max-width: 200px;
  position: fixed;
  z-index: 2000;
  display: block;
  position: absolute;
  top: 0;
  right: 100%;
  height: 100%;
  width: 100%;
  background: #f2851f;
}

 .pace.pace-inactive {
   display: none;
 }

FYR：

http://jsfiddle.net/686rugps/

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

7 个答案: