Question

我有一个link_to，由于解析了show中的大量JSON数据而导致渲染速度变慢。我在目标页面完成加载时在索引页面上实现加载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>

Answer 1

宝石文件中的

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();
    });
  },

使用ajax rails 3.2在link_to上加载gif

1 个答案: