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

我正在使用Pace.js（http://github.hubspot.com/pace/）作为基本的加载程序。如何将Pace.js附加到DOM中的自定义位置？

它迄今为止没有问题很好用。但是，我想要做的是在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放到哪里？

来源

2016-03-01 Michael Giovanni Pumo

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

在插件选项对象中，有一个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.

似乎现在正常工作。希望这可以帮助别人。步伐

来源

2016-03-01 11:33:57

-1

打开css文件，你可以通过改变顶部改变它的位置：7％重要

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

来源

2017-04-27 06:49:42

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

我知道这是一个古老的线程，但我想扩大上述矿山迈克尔的回答，我设法更有效地使用Pace.js通过设置：

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

这样我可以选择的元素我不想按速度监控（如广告）。

来源

2017-07-22 19:36:34

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

回答

相关问题