如何在页面之间显示页面加载答案

【问题标题】：How to show page loading between pages如何在页面之间显示页面加载
【发布时间】：2015-10-08 22:14:48
【问题描述】：

我不确定是否所有 Rails 应用程序的行为都相同，或者是否只是在我的应用程序设置范围内。对于我的应用程序，当页面加载时（所以当点击链接直到服务器响应内容时）根本没有页面加载的迹象。一般网站在页面加载期间会有一个旋转轮代替图标，以显示页面正在加载。我在 Heroku 上使用 Rails 4.0.0。

【问题讨论】：

并非所有浏览器都显示相同的页面加载指示器。最新版本的 Safari 填充地址栏背景颜色，Chrome (v43) 为 tab 图标（不是地址栏图标）设置动画等。如果页面加载正确，则不太可能是 Rails 问题并且更接近与“浏览器用户体验”不同。

标签： ruby-on-rails ruby-on-rails-4 heroku

【解决方案1】：

这些网站大部分时间就是我们所说的单页应用程序。这些网站使用大量基于 AJAX 的内容获取机制，这与前端编程有关，与后端编程有关。

如果你真的想实现这个功能，可以使用AngularJS、BackboneJS等支持单页Web应用的框架。

当您获取另一个页面表单服务器时，您的所有 HTML、CSS 和 JS 都消失了，而新内容被获取并呈现。因此，除非您使用基于 AJAX 的页面，否则您无法在两者之间显示加载页面。

【讨论】：

他的问题正好相反。

【解决方案2】：

Rails 默认使用 turbolinks。

请查看 turbolinks 及其工作原理。它基本上替换了页面的正文而不是发出新的请求，这就是您在浏览器中看不到加载指示的原因。

如果您想查看页面加载，您可以禁用 turbolinks，将其从 application.js 中删除，或者使用像这样的 gem：https://github.com/caarlos0/nprogress-rails 来显示页面的实际加载。

我强烈建议你保留 turbolinks 并使用我给你的第二个选项。

【讨论】：

嗨@coorasse，感谢您花时间理解我的问题并提供如此全面的答案！第二个选项是提供一些 JS 加载效果，让您能够控制加载的外观。但是，有没有办法让浏览器像普通网站一样运行（在 Chrome 中会在左下方加载消息并在图标中旋转轮子）？
您必须删除 turbolinks 才能恢复到标准行为

【解决方案3】：

来自Turbolinks，类似？

$(document).on('page:fetch', function() {
  // show spinner
});

$(document).on('page:change', function() {
  // hide spinner
});

Turbolinks 5 更新

对于Turbolinks 5：

$document.on('turbolinks:click', function() {
  // show spinner
});

$document.on('turbolinks:load', function() {
  // hide spinner
});

如果您使用 jQuery 并且您的微调器位于 div.spinner 中，您可以使用以下命令显示和隐藏它：

$(document).on("turbolinks:click", function(){
  $(".spinner").show();
});

$(document).on("turbolinks:load", function(){
  $(".spinner").hide();
});

【讨论】：