Rails 4. 没有 Ajax 的页面之间的加载指示器答案

【问题标题】：Rails 4. Loading indicator between pages without AjaxRails 4. 没有 Ajax 的页面之间的加载指示器
【发布时间】：2013-10-15 19:07:37
【问题描述】：

我正在尝试在没有 Ajax 的情况下在不同页面之间制作加载指示器。我有一个包含 gif 的 .spin-wrapper 类的 div。所以我需要在加载页面时隐藏它，并在我单击链接时显示它。加载新页面时，它应该再次隐藏（等等）。

但是当我重新加载页面时它只工作一次。它加载并隐藏我的 div，然后在我单击链接后显示它（出现控制台消息）。但它不起作用。我在任何其他页面上都看到了我的 div，但我的控制台消息也没有出现。

Application.js：

function toggleSpin() {
    $('.spin-wrapper').toggle()
    console.log('clicked');
}

$(document).ready(function () {
    $('.tooltip_cell').tooltip({container: 'body'})

    $('.spin-wrapper').hide()
    $('a').on('click',toggleSpin);
    console.log('loaded');

});

如何解决？

【问题讨论】：

但是...您没有使用 ajax。一旦您单击该链接，当前页面就会被卸载并开始加载新页面。你不能真正在上一页上做一个加载栏，因为它会在上一页卸载时被破坏（这将立即接近），这一切都必须在目标页面上处理。
@KevinB，你有什么办法处理它吗？
不，因为你不能。如果要加载吧，最好使用ajax。如果没有 ajax，就不需要加载条，因为当您可以显示一个时，页面可能已经加载完毕。（当然，除非它是一个图形繁重的页面，但那是完全不同的情况。）
@KevinB 我可以在新页面以某种方式加载之前显示指示器吗？现在缓存更新需要4-5秒，所以我想让用户知道一切都很好。
4-5 秒在请求的哪一边？在新页面开始加载之前，或在新页面完成加载之前。

标签： jquery ruby-on-rails ruby-on-rails-4 loading

【解决方案1】：

如果您使用的是 rails 4 和 Turbolink，您的问题可能是您的 javascript 代码只加载了一次。尝试禁用 Turbolink（在asset/application.js 中）并测试您的代码。如果它有效并且你想继续使用 Turbolink，我推荐这个https://github.com/kossnocorp/jquery.turbolinks 也检查一下！ https://github.com/rails/turbolinks/ http://railscasts.com/episodes/390-turbolinks

【讨论】：

【解决方案2】：

我有一个 .spin-wrapper 类包含 gif 的 div。所以我需要在加载页面时隐藏它，并在我单击链接时显示它。加载新页面时，它应该再次隐藏（依此类推）。

点击您的链接后不久该 div 将不再存在，因此当您到达新页面时它将再次隐藏，因为它默认为隐藏。相反，将其默认为可见，然后在窗口加载时将其隐藏。

$(window).on("load",function(){
    $(".spin-wrapper").fadeOut();
});

如果您愿意，当然也可以在单击链接后显示它。

$('a').on('click',function(){
    $(".spin-wrapper").fadeIn();
});

在点击时显示它可能会导致它不是很流畅，因为微调器会消失，然后再次显示。

【讨论】：

同理。它仅在第一次或我重新加载页面时有效。然后我在我网站的每个页面上都看到了这个 div。加载事件仅被触发一次..
它应该只触发一次，如果您没有按照问题中的建议使用 ajax，那应该绰绰有余。我认为您实际上正在使用 ajax，只是不知道。
我怎样才能确定它？我自己不使用，但也许 Rails 或 Bootstrap 可以..
查看控制台的网络选项卡，将其过滤为 xhr，然后重新加载页面并单击几个链接。

【解决方案3】：

Rails 使用 turbolinks，所以我们应该使用

$( document ).on('turbolinks:click', function() {
  $('#your_spinner_div').removeClass('hide-div');
});

在哪里，

.hide-div{
  display: none;
}

还要加

    $( document ).on('turbolinks:before-cache', function() {
  $('#your_spinner_div').addClass('hide-div');
});

所以您在点击浏览器返回时不会看到微调器。

发布此答案是因为我已尝试在上述答案中添加 sn-ps 并且没有用。希望这对以后刚接触 Rails 的人有所帮助。

【讨论】：