如何让普通网站页面跳转时显示加载进度条？

为了方便大家使用，我已经将代码开源，如果觉得不错的话点个 ✨star✨ 支持一下下

欢迎大佬们一起参与维护😁👍

开源仓库: https://github.com/Lete114/page-load-progress

体验 Demo: https://lete114.github.io/page-load-progress/test/index.html

有没有人注意到 GitHub 和 YouTube 这些网站在页面跳转时，网页顶部总是会显示一个加载进度条？

比如:

• GitHub: 点击进入某个仓库，或者进入某个项目的文件夹时屏幕顶部总是会显示一个加载进度条，并且页面不会刷新
• YouTube: 点击观看某个视频时，屏幕顶部总是会显示一个加载进度条，并且页面不会刷新

这个效果是怎么实现的呢？其实我也不知道，也并没有特意去查看或逆向过它们 Web 端的 js 代码，我能想到的办法就只有使用 pjax 或者 turbo、turbolinks。但它们也有一些弊端，需要网站管理员去维护，甚至重新编码调整

如果页面需要交互或者需要 js 操作 dom 的，如获取页面上的所有外链 a 标签，给 a 标签的 href 属性值开头添加跳转拦截 https://link.example.com/?target=，js 不会再次重载，因为页面跳转是不刷新网页的(它只负责替换网页中变化的结构)，得手动重载 js，以上提到的库它们都有提供重载 js 的解决方案，需要你对网站进行一些调整或代码调整

正文

那么如果不使用这些库如何让传统的普通网站(指点击链接后页面跳转会刷新页面)实现这一功能呢?

prefetc