Question

我正尝试将nprogress与我构建的PWA一起使用以显示加载栏，尤其是在以独立模式启动应用程序时。

我的想法是在beforeunload触发时启动该栏，并在页面实际卸载之前完成该栏。

为此，我设置了以下内容：

import NProgress from "nprogress";

window.onbeforeunload = () => {
    NProgress.start();
};

window.onunload = () => {
    NProgress.done();
};

当然，我后来发现onunload在页面内容被隐藏后会触发，因此进度条再也没有机会完成。

我已尝试进行更改，以便在下一页加载时继续显示进度条，但这也不太正确。

在使用window.onload = () => { NProgress.done(); }的情况下，进度条从0重新开始，而不是保留前一页的完成百分比。这会导致一些奇怪的行为，如下所述：

用户点击链接
出现进度条，进度从0到〜0.4
加载新页面
出现进度条
进度栏立即从0变为1

这意味着在没有完成进度条之前，会出现一个奇怪的闪烁，没有进度条，然后是重置进度条。

如何修改脚本，以便进度栏在页面重定向之前完成？

Answer 1

这是我解决问题的一种方法，进度条仍然消失，因为发生了页面更改，而不仅仅是dom交换。但这给人一种错觉，正在发生某种事情。

我使用localstorage [1]保存卸载时的进度，并在DOM加载时进行处理，但这并不是真正必要的，如果需要，您只需在加载的DOM上以0.3开始启动进度条。最好的情况是，该网站的加载速度足够快，以使用户不会注意到任何数学差异：）

window.addEventListener('beforeunload', (event) => {
    // set starting point
    NProgress.set(0.1);
    // fake the unload progress of a page with an interval
    let timerId = setInterval(() => {
        // increment progress bar
        NProgress.inc();
        // save the progress in local storage to pick up the progress on page load 
        store.set('nprogress', NProgress.status);
    }, 500);
});

document.addEventListener('DOMContentLoaded', (event) => {
    // get stored progress
    let start = store.get('nprogress') || 0.2;
    // clean up local storage
    store.remove('nprogress');
    // adjust the value a bit if it got too high
    if(start > 0.7) start = 0.5;
    // start the progress on dom load
    NProgress.set(start);
});

window.addEventListener('load', (event) => {
    NProgress.done();
});

[1] https://github.com/marcuswestin/store.js#readme

通过beforeunload跟踪自定义加载栏的加载进度

1 个答案: