3

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

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

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

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

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

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

4

1 回答 1

-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();
        }
    }
}
于 2020-02-11T15:44:39.563 回答