jquery插件Pace.js無法正常工作

Question

我正在使用jquery插件pace.js，我希望當頁面加載時，首先加載進度條，然后顯示內容，這是我的代碼

<div class="pace  pace-inactive">
    <div class="pace-progress" data-progress-text="100%" data-progress="99" style="width: 100%;">
        <div class="pace-progress-inner"></div>
    </div>
    <div class="pace-activity"></div>
</div>

jsfiddle將定義我的工作結果。

在我的情況下，內容和進度條都會同時顯示。

我想要的是：我希望首先顯示進度條，進度條符號后，內容將像本網站一樣顯示。

更新：

這是我接下來嘗試但當進度完成時它不會顯示任何內容......

<!doctype html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>bk</title>
      <link rel="stylesheet" href="css/pace-atom.css"/>
      <style>
         #contents {
             display: none;
         }
         .cover {
             position: fixed;
             left: 0px;
             top: 0px;
             width: 100%;
             height: 100%;
             z-index: 1999;
             background:rgb(33,33,33);
         }
      </style>
   </head>
   <body class="pace-done">
      <div class="pace  pace-inactive">
         <div class="pace-progress" data-progress-text="100%" data-progress="99" style="width: 100%;">
            <div class="pace-progress-inner"></div>
         </div>
         <div class="pace-activity"></div>
      </div>
      <div>
         <div id="contents">
            <img src="d3.jpg" alt=""/>
            <img src="d1.jpg" alt=""/>
            <img src="d2.jpg" alt=""/>
            <img src="d2.jpg" alt=""/>
            <img src="d1.jpg" alt=""/>
         </div>
      </div>
      <script src="js/pace.js"></script>
      <script type="text/javascript">
         $(function() {
             Pace.on("done", function(){
                 $("#contents").fadeIn(1000);
             });
         }

      </script>
   </body>
</html>

Answer 1

如果進度條停留在99％，並且您使用的是Visual Studio，則必須取消選中 “啟用瀏覽器鏈接”選項。 這將解決不完整的進度條問題。

Answer 2

好的，所以實現這一點的一個簡單方法是隱藏所有內容，直到完成加載步伐（我假設有一個推理加載屏幕的理由，但我不確定）。

所以你的內容可以有一個id #contents ，默認display: none 。 然后，您可以在完成步調之后顯示內容

$(function() {
    Pace.on("done", function(){
        $("#contents").fadeIn(1000);
    });
});

這是一個工作的小提琴http://jsfiddle.net/59caubpx/3/

Answer 3

請檢查您是否正確添加了所有文件，例如jquery.js或theme.atom.css或pace.js等...

jquery插件Pace.js無法正常工作

問題描述

3 個解決方案

解決方案1
14 2016-07-30 05:14:32

解決方案2
3 已采納 2015-02-07 17:47:16

解決方案3
2

jquery插件Pace.js無法正常工作

問題描述

3 個解決方案

解決方案1 14 2016-07-30 05:14:32

解決方案2 3 已采納 2015-02-07 17:47:16

解決方案3 2

解決方案1
14 2016-07-30 05:14:32

解決方案2
3 已采納 2015-02-07 17:47:16

解決方案3
2