在使用speed.js加載時隱藏頁面
[英]Hide page while loading with pace.js
7 個解決方案
解決方案1
12 2014-06-07 13:49:29
我知道這是一個老帖子，但是我剛才遇到了這個問題，並想出了另一個可能的解決方案:)
在Pace文檔中隱藏的是Pace.on（）。 您可以使用它綁定到文檔中列出的事件，如下所示：
Pace.on("done", function(){
$(".cover").fadeOut(2000);
});
解決方案2
8 2016-05-16 09:50:06
我使用以下代碼解決了這個問題。
.pace-running > *:not(.pace) {
opacity:0;
}
如顯示：沒有人導致頁面上的Google地圖對齊問題。 這很完美，需要為此添加一些過渡。
解決方案3
5 2014-03-09 14:33:26
您無需隱藏頁面。 只需制作一個固定的元素即可覆蓋您的頁面而不顯示它，然后在加載該函數時使其淡出。
$(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或其他內容，當頁面完全加載時，該內容將消失。
解決方案4
3 2016-01-19 14:47:51
我知道這個問題已經很老了，但是我設法用一小段CSS來解決這個問題。
.pace-running > *:not(.pace) {
display: none;
}
這利用了頁面加載過程中PACE放置在<body>元素上的類。 請注意，這可能會使頁面在長時間的AJAX請求中消失...您可能通過.pace-running一些Javascript以檢查要從<body>元素中刪除的.pace-running類來解決此問題。 但是，如果您沒有任何XHR請求，那么就可以了。
解決方案5
2 2015-12-27 14:13:54
Pace.js實際上向主體添加了一個類。 在步速處於活動狀態時會添加“步速”，在步速完成時將其替換為“已完成”。
您可以然后某些CSS：
.pace-running{
opacity: .67;
background-color: #2E2E2E;
}
您可以根據需要編輯以上代碼。
解決方案6
1 2016-11-30 13:18:12
如果您決定不使用不透明度，則可以嘗試：
.pace-running {
background: rgba(250,250,250, 1);
color: rgba(200,200,200, 1);
}
在運行Pace.js時減少可視性或隱藏背景頁面所需的代碼更少
解決方案7
0 2015-04-14 09:07:48
在簡單易用的示例下面嘗試...。
- 查找整個頁面容器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; }
財政年度：
React / Redux應用程序（例如Pace.js）的加載百分比欄，僅在初始頁面加載時顯示
[英]Percentage loading bar for React / Redux app like Pace.js that only shows on initial page load
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.