在ajax rails上加載link_to上的gif 3.2

Question

我有一個link_to，由於在表演中解析了很多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

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