ajax 레일을 사용하여 link_to에 gif로드 3.2

Question

쇼에서 많은 JSON 데이터를 파싱하여 렌더링 속도가 느린 링크가 있습니다. 도착 페이지의로드가 완료되는 동안 색인 페이지에서로드하는 GIF를 구현하는 데 문제가 있습니다. 로드 아이콘을 보여 주지만, 쇼 페이지로 이동하지 않고 애니메이션을 종료합니다.

CSS

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

인덱스보기 당신의 gemfile에서

<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' 

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