在页面导航上使用 pace.js 进度条

Question

这是我想要实现的目标：在每个页面导航（不是 SPA）上显示进度条。 所以我尝试了：

    $(window).on('beforeunload', function () {
        showLoadingBar();
    });

这在大多数情况下都可以正常工作。但是有些它并不兼容所有浏览器。 （它不适用于调用 Web 视图的 Mac 应用程序）。

所以我决定使用像 pace.js 这样的库。现在这个库在每个 Ajax 请求上都能正常工作，但它不符合我的要求。我还尝试设置速度选项，例如：

paceOptions = {
  ajax: true,
  document: true,
  eventLag: true,
  elements: {
    selectors: ['body']
  }
};

但它不会在页面导航上显示栏，（它只在加载新页面时显示栏，但我希望它在页面卸载时也显示）。所以我的问题是：有没有办法在导航页面时显示速度加载栏？

Answer 1

这可能会满足您的需求。

window.onbeforeunload = renderLoading;

function renderLoading() {
    Pace.stop();
    // Enable the bar manually
    var paceEle = $(Pace.bar.el);
    paceEle.removeClass('pace-inactive').addClass('pace-active');
    var timer = 0;
    var intervalId = setInterval(frame, 100);

    function frame() {
        if (timer === 96) {
            // Clear the timer interval once its reached 96%
            clearInterval(intervalId);
        } else {                
            timer = timer + 1;
            // Increase the Percentage of progressbar
            Pace.bar.progress = timer;
            // Call render function to the progress bar and it updates the percentage of the loading bar.
            Pace.bar.render();
        }
    }
}