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 将定义我的工作结果。

在我的例子中，内容和进度条会同时显示。

我想要什么：我希望进度条首先显示，进度条完成后内容将显示在this网站中。

更新：

这是我接下来要尝试的，但是当进度完成时它不会显示任何内容...

<!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

好吧，一个简单的实现方法是隐藏你的所有内容，直到 pace 加载完成（我假设 pace 的加载屏幕是有原因的，但我不确定）。

因此您的内容可以有一个 ID #contents 并且默认为 display: none。然后你可以像这样在 pace 完成后显示内容

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

这是一个 fiddle 的工作 http://jsfiddle.net/59caubpx/3/

Answer 2

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

Answer 3

如果进度条停留在 99%，并且您正在使用 Visual Studio，则必须 取消选中 'Enable Browser Link' 选项。这将解决进度条不完整的问题。

jquery 插件 Pace.js 不工作

jquery plugin Pace.js not working

javascript

jquery

plugins