如何将Pace.js附加到DOM中的自定义位置？
我使用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
Stack Overflow用户
发布于 2016-03-01 11:33:57
好吧，所以我想明白了。似乎是没有文件的。
在plugins options对象中，有一个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();这有效地覆盖了target使用的默认选项中的Pace.js键。
现在看来很好。希望这能帮到其他人。
Stack Overflow用户
发布于 2017-07-22 19:36:34
好吧，所以我想明白了。似乎是没有文件的。在plugins options对象中，目标键有一个值。
我知道这是一个旧的线程，但我想将Michael的答案扩展到我的答案之上，我通过设置更有效地使用了Pace.js：
pace.options.target = 'body:not(.pace-ignore)';这样，我就可以选择我不希望被速度监控的元素(比如广告)。
Stack Overflow用户
发布于 2018-10-26 11:24:51
因为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" }'>
在您的减文件中：
// 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;
}https://stackoverflow.com/questions/35721106
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号