为了方便大家使用,我已经将代码开源,如果觉得不错的话点个 ✨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 的解决方案,需要你对网站进行一些调整或代码调整
正文
那么如果不使用这些库如何让传统的普通网站(指点击链接后页面跳转会刷新页面)
实现这一功能呢?