如何正确实现加载栏加载网址？

Question

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

我有一个网站，在自己的网址上有不同的网页，例如＆＃39; / contact＆＃39;，＆＃39; / about＆＃39;，＆＃39; / products＆＃39;。

将顶栏放在顶部的技巧是什么？{* 3}}

这就是我需要的：

1. 用户点击页面上的链接。
2. JavaScript处理点击，显示进度条，开始增长，然后将事件传递给浏览器。
3. 浏览器开始加载页面。此时，页面清除并变为白色和空白。
4. 由于进度条处于某个不为零的位置，比如63％，现在新页面上没有关于它的位置的信息。

所以，我可以在技术上在每个页面上运行一些功能，比如showGrowingProgressBar(value)，但由于我不知道它离开的地方，我不能把它放在与它离开的地方相同的进度状态。 / p>

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

Answer 1

我想你想要构建一个单页的Web应用程序，其中的东西在同一页面中加载而不刷新。 您可以使用AJAX执行此操作。您可以使用新的html填充特定的div而无需刷新。 使用Angular JS可以更轻松地处理它。您可以为每个页面定义路径，也可以为不同的页面设置模板，并在用户单击链接时加载该模板。它只是用新的html代码替换容器div，你也可以轻松处理这些网址。

Answer 2

Turbolinks似乎就是你要找的东西。它会动态加载您的页面并显示加载指示符。

  

Turbolinks可以更快地浏览您的Web应用程序。获得单页面应用程序的性能优势，而不会增加客户端JavaScript框架的复杂性。使用HTML在服务器端呈现视图并像往常一样链接到页面。当您关注链接时，Turbolinks会自动提取页面，交换页面并合并其中，而不会产生整页加载的费用。

Answer 3

您的方法是：

1. 用户点击页面上的链接。
2. JavaScript处理点击，显示进度条，开始增长，然后将事件传递给浏览器。
3. 浏览器开始加载页面。此时，页面清除并变为白色和空白。
4. 由于进度条处于某个不为零的位置，比如63％，现在新页面上没有关于它的位置的信息

你的方法应该是：

1. 用户点击页面上的链接。
2. JavaScript处理点击，浏览器开始加载页面。此时，页面清除并变为白色和空白。
3. 新页面显示进度条，开始增长，然后将事件传递给浏览器。增长可以用no来图示。已完成的API调用除以总数。该页面所需的api电话。