如何將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中的自定義位置？

回答

相關問題