如何将 Pace.js 附加到 DOM 中的自定义位置？

Question

我正在使用 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 去向吗？

Answer 1

好的，所以我明白了。它似乎是无证的。

在插件选项对象中，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();

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

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

Answer 2

打开csspace文件，你可以通过改变来改变它的位置顶部 : 7% !important

.pace .pace-progress {
  background: #29d;
  position: fixed;
  z-index: 2000;
  top: 7% !important;
  right: 100%;
  width: 100%;
  height: 2px;
}

Answer 3

Okay, so I figured this out. It seems to be undocumented. In the plugins options object, there is a value for the target key.

我知道这是一个旧话题，但我想在我的上面扩展 Michael 的回答，我设法通过设置更有效地使用 Pace.js：

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

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

Answer 4

因为大多数 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;
}

如何将 Pace.js 附加到 DOM 中的自定义位置？

How do I append Pace.js to a custom location in the DOM?

javascript

pace.js