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

【问题标题】：Track load progress for custom loading bar via beforeunload通过 beforeunload 跟踪自定义加载栏的加载进度
【发布时间】：2018-10-29 18:52:49
【问题描述】：

我正在尝试将 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

这意味着有一个奇怪的没有进度条的闪烁，然后是一个重置进度条，最后才完成。

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

【问题讨论】：

标签： javascript onload progress onbeforeunload

【解决方案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

【讨论】：