javascript 加载pace.js时隐藏页面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22283384/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Hide page while loading with pace.js
提问by user3052215
回答by julianwyz
I know this is kind of an old post but I ran into this issue just now and figured out another possible solution :)
我知道这是一篇旧帖子，但我刚刚遇到了这个问题并想出了另一个可能的解决方案:)
Hidden in the Pace documentation is Pace.on(). You can use it to bind to the events listed in the docs, like so:
Pace 文档中隐藏的是 Pace.on()。您可以使用它来绑定到文档中列出的事件，如下所示：
Pace.on("done", function(){
$(".cover").fadeOut(2000);
});
回答by Jakki
I resolved this using the following code.
我使用以下代码解决了这个问题。
.pace-running > *:not(.pace) {
opacity:0;
}
as display:none was causing an issue with alignment in the google maps on the page. this works perfectly and need to add a bit of transition to this.
因为 display:none 导致页面上的谷歌地图对齐问题。这很完美，需要为此添加一些过渡。
回答by Rodrigo Zuluaga
You don't need to hide the page. Just make a fixed element that covers your page without showing it, then fade it away with loading the function.
您不需要隐藏页面。只需制作一个固定元素覆盖您的页面而不显示它，然后通过加载功能将其淡化。
$(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);
}
And you can add a loading .gif or something to the container, it will vanish when your page is fully loaded.
你可以在容器中添加一个正在加载的 .gif 或其他东西，当你的页面完全加载时它会消失。
回答by deansheather
I know this question is fairly old, but I managed to get this working with one small block of CSS.
我知道这个问题已经很老了，但我设法用一小块 CSS 解决了这个问题。
.pace-running > *:not(.pace) {
display: none;
}
This utilises the class that PACE places on the <body>element while the page loading is in process. Take note, this might make the page disappear during long AJAX requests... You could probably get around that by making some Javascript to check for the .pace-runningclass to be removed from the <body>element. If you don't have any XHR requests, though, you should be fine with just this.
这利用了 PACE<body>在页面加载过程中放置在元素上的类。请注意，这可能会使页面在长时间的 AJAX 请求中消失……您可以通过编写一些 Javascript 来检查.pace-running要从<body>元素中删除的类来解决这个问题。但是，如果您没有任何 XHR 请求，那么您应该没问题。
回答by anurag619
Pace.js actually adds a class to the body. 'pace-running' is added while pace is active, replaced with pace-done when it's completed.
Pace.js 实际上给 body 添加了一个类。'pace-running' 在配速激活时添加，在配速完成后替换为配速完成。
You can certain css then:
你可以确定 css 然后：
.pace-running{
opacity: .67;
background-color: #2E2E2E;
}
You can edit the above code according to your needs.
您可以根据需要编辑上面的代码。
回答by Anthony
If you decide not to use opacity, you could try:
如果您决定不使用不透明度，您可以尝试：
.pace-running {
background: rgba(250,250,250, 1);
color: rgba(200,200,200, 1);
}
Less code required to reduce the visibility or hide the background page while Pace.js is running
在 Pace.js 运行时降低可见性或隐藏背景页面所需的代码更少
回答by Stack Overflow User
Try it below example simple and easy....
试试下面的例子简单易行....
- find set id for whole page container div
- 查找整个页面容器 div 的设置 ID
<body> <div id="pagecontent"> Loaded asdasdas das das dasd asd asdasdasdasdasdasdasdasdasd </div> </body>
<body> <div id="pagecontent"> Loaded asdasdas das das dasd asd asdasdasdasdasdasdasdasdasd </div> </body>
after put this css is based on whatever you mentioned in whole container 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; }
放置此 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:
财政年：
