使用 ajax rails 3.2 在 link_to 上加载 gif答案

【问题标题】：Loading gif on link_to with ajax rails 3.2使用 ajax rails 3.2 在 link_to 上加载 gif
【发布时间】：2016-08-11 02:18:53
【问题描述】：

由于解析节目中的大量 JSON 数据，我有一个 link_to 渲染缓慢。我在目标页面完成加载时在索引页面上实现加载 gif 时遇到问题。它显示加载图标，但不会转到显示页面并完成其动画。

CSS

#loading-indicator {
  position: absolute;
  left: 10px;
  top: 10px;
}

索引视图

<img src="/images/loading.gif" id="loading-indicator" style="display:none" />
<% @list.each do |l| %>
<%= link_to l.name, list_path(l), :remote => true %>
<% end %>

脚本

<script>
$(document).ajaxSend(function(event, request, settings) {
  $('#loading-indicator').show();
});

$(document).ajaxComplete(function(event, request, settings) {
  $('#loading-indicator').hide();
});
</script>

【问题讨论】：

你可以使用gem 'blockuijs-rails'来申请加载器

标签： ruby-on-rails ajax ruby-on-rails-3.2

【解决方案1】：

在你的 gemfile 中

gem 'blockuijs-rails',  :git => 'https://github.com/BoTreeConsultingTeam/blockuijs-rails.git'

在你的 js 中

applyLoader: function () {
    $.blockUI({message: '<img src="/ring-alt.svg" width="75px" />',
      css: {
      border: 'none',
      padding: '15px',
      backgroundColor: 'transparent',
      '-webkit-border-radius': '10px',
      '-moz-border-radius': '10px',
      opacity: .5,
      color: '#fff'
    }});
  },
  ajaxLoader: function () {
    $(document).ajaxStart(function () {
      applyLoader();
    }).ajaxStop(function () {
      $.unblockUI();
    });
  },

【讨论】：