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();
        }
    }
}

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

1 个答案: