Javascript 如何正确实现加载URL的加载栏？

我认为这个问题以前也是以类似的形式提出的，但我没有清楚地理解如何正确地实施它

我有一个网站，它在自己的URL上有不同的页面，比如“/contact”、“关于”、“产品”

像这样把顶杆放在顶上的技巧是什么

以下是我需要的：

用户单击页面上的链接

JavaScript处理点击，显示进度条，开始增长，然后将事件传递给浏览器

浏览器开始加载页面。此时，页面清空，变成白色和空白

因为进度条的位置不是零，比如说63%，现在新页面上没有关于它在哪里的信息

因此，从技术上讲，我可以在每个页面上运行一些函数，比如

showGrowingProgressBar（value）

，但是因为我不知道它离开了哪里，所以我无法将它置于与离开时相同的进度状态

---

如何让它看起来更自然，就像用户没有离开页面，但更像是一种SPA体验？

我想您应该构建一个单页web应用程序，让内容加载到同一页面而不刷新。 您可以使用AJAX来实现这一点。您可以使用新的html填充特定的div，而无需刷新。 使用Angular JS可以更轻松地处理它。您可以为每个页面定义路由，也可以为不同的页面定义模板，并且可以在用户单击链接时加载该模板。它将用新的html代码替换容器div，您还可以轻松地处理URL。

似乎就是您要寻找的。它动态加载页面并显示加载指示器

Turbolinks使web应用程序的导航速度更快。获得单页应用程序的性能优势，而不增加客户端JavaScript框架的复杂性。使用HTML在服务器端呈现视图，并像往常一样链接到页面。当您跟踪某个链接时，Turbolinks会自动获取页面、交换its并合并its，而无需承担整个页面加载的成本

你的做法是：

用户单击页面上的链接

JavaScript处理点击，显示进度条，开始增长，然后将事件传递给浏览器

浏览器开始加载页面。此时，页面清空，变成白色和空白

因为进度条的位置不是零，比如说63%，现在新页面上没有关于它在哪里的信息

你的方法应该是：

用户单击页面上的链接

JavaScript处理点击，浏览器开始加载页面。此时，页面清空，变成白色和空白

新页面显示进度条，开始增长，然后将事件传递给浏览器。增长可以用完成的API调用数除以该页面所需的API调用总数来表示

---

很明显，通过使用AJAX加载内容，“我如何让它看起来自然，就像用户没有离开页面，但更像是SPA体验？”——这需要一个SPA来完成。您对加载新窗口（页面）时浏览器工作方式的描述存在缺陷