在Rails中顯示ajax加載器圖像

Question

使用Rails 3.2。這是一個簡單的Ajax加載，我編碼：

# places/revisions.html.erb 
<a href="<%= version_path(version) %>" class="diff">View changes</a> 

<div id="version"><!-- #version used for ajax --> 
    Click "View changes" to see the diff. 
</div> 

<% content_for :javascript_onload do %> 
    $('a.diff').attr('data-remote', 'true'); 
<% end %> 

# versions_controller.rb 
class VersionsController < ApplicationController 
    def show 
    @version = Version.find(params[:id]) 
    end 
end 

# versions/show.js.erb 
$('#version').html('<%= escape_javascript render :partial => "versions/version", :locals => {:version => @version} %>'); 

的<div id="version"></div>是要去與通過Ajax的新內容獲取所取代。雖然它仍然在加載，但我想在的View changes旁邊添加圖像加載器。我應該怎麼做？

Answer 1

我假設你使用jQuery來觸發它。

在您的視圖中，除了「查看更改」之外，您還可以放置一個包含圖像的div。

<div id="version"><!-- #version used for ajax --> 
    Click "View changes" to see the diff. 
    <div class="image"></div><!-- it should be hidden first. --> 
</div> 

<a href="#" class="diff">View Changes</a> 

並給你的AJAX觸發器提供兩個事件。

$('a.diff').click(function(){ 
    $.ajax({url: 'your url', 
     data: 'your params', 
     beforeSend: function() { 
      $('div.image').show(); 
     }, 
     complete: function() { 
      $('div.image').hide(); 
     }}); 

});