javascript - jQuery插件Pace.js不起作用

我正在使用jquery插件speed.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>

最佳答案

好的，一种简单的实现方法是隐藏您的所有内容，直到完成加载进度为止(我认为对加载屏幕的加载有一定的理由，但我不确定)。

因此，您的内容可以具有id #contents并为默认display: none。这样，您便可以在完成步调后显示内容

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

这是它工作的小提琴http://jsfiddle.net/59caubpx/3/

JQuery插件

javascript - jQuery插件Pace.js不起作用