3

我正在使用 Pace.js ( http://github.hubspot.com/pace/ ) 作为基本加载程序。

到目前为止，它工作得很好，没有任何问题。但是，我想做的是将 Pace.js HTML 附加到我选择的元素中。

生成的 HTML 如下所示：

<div class="pace  pace-inactive">
    <div class="pace-progress" data-progress-text="100%" data-progress="99" style="transform: translate3d(100%, 0px, 0px);">
        <div class="pace-progress-inner"></div>
    </div>
    <div class="pace-activity"></div>
</div>

默认情况下，Pace.js 将自身附加在开始<body>标记之后。有什么办法可以挂钩这个生成的 HTML 的去向吗？

4

4 回答 4

5

好的，所以我想通了。它似乎是无证的。

在插件选项对象中，键有一个值target。

默认选项如下所示：

defaultOptions = {
    catchupTime: 500,
    initialRate: .03,
    minTime: 500,
    ghostTime: 500,
    maxProgressPerFrame: 10,
    easeFactor: 1.25,
    startOnPageLoad: true,
    restartOnPushState: true,
    restartOnRequestAfter: 500,
    target: 'body',
    elements: {
      checkInterval: 100,
      selectors: ['body']
    },
    eventLag: {
      minSamples: 10,
      sampleCount: 3,
      lagThreshold: 3
    },
    ajax: {
      trackMethods: ['GET'],
      trackWebSockets: true,
      ignoreURLs: []
    }
  };

在我的项目中，我使用的是 Browserify，所以我是这样实现的：

var pace = require('../plugins/pace');
pace.options.target = '#main';
pace.start();

这有效地覆盖了targetPace.js 使用的默认选项中的键。

现在似乎工作正常。希望这对其他人有帮助。

于 2016-03-01T11:33:57.460 回答
1

好的，所以我想通了。它似乎是无证的。在插件选项对象中，目标键有一个值。

我知道这是一个旧线程，但我想在我的上面扩展迈克尔的答案，我设法通过设置更有效地使用 Pace.js：

pace.options.target = 'body:not(.pace-ignore)';

这样我就可以选择我不想被节奏监控的元素（比如广告）。

于 2017-07-22T19:36:34.087 回答
0

因为大多数pace.js 的CSS 使它的位置是固定的，所以仅仅将它附加到一个特定的元素不会有太大的帮助。

这是让它填充元素的解决方案：

在您的index.html中：

<nav style="background-color: transparent; height: 5px; position: sticky; top: 0; z-index:10" id="pace-nav"></nav>
<script src="~/lib/PACE/pace.js" data-pace-options='{ "target": "#pace-nav" }'>

在你的less文件中：

// main: ../main.less
@import (less) "../../../node_modules/pace-progress/themes/blue/pace-theme-minimal.css";

.pace .pace-progress {
  background: #2299dd;
  position: relative;
  z-index: 2000;
  right: 100%;
  width: 100%;
  height: 5px;
}
于 2018-10-26T11:24:51.080 回答
-2

打开pace的css文件，你可以通过改变top来改变它的位置：7%！important

.pace .pace-progress {
  background: #29d;
  position: fixed;
  z-index: 2000;
  top: 7% !important;
  right: 100%;
  width: 100%;
  height: 2px;
}
于 2017-04-27T06:49:42.770 回答