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

如果进度条停留在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 个答案: