jquery - ajax在rails中加载图像

Question

我正在尝试在我的 Rails 应用程序中实现 ajax 加载图像。

现在我拥有的是一个加载gif，它在ajax过程中页面加载时存在，然后在ajax完成后消失。中间和最后一部分是我想要的，但我希望隐藏该图像，直到我单击 ajax 触发链接。

我查了很多方法来做到这一点。我尝试过创建一个新的部分，在js中使用带有url标签、数据标签的ajax代码，将图像隐藏在css中，然后在ajax启动上显示它，但似乎没有任何效果。

这就是我所拥有的:

js:

$(function() {
    $('.load-ajax').hide()  // hide it initially.
        .ajaxStart(function() {
            $(this).show(); // show on any Ajax event.
        })
        .ajaxStop(function() {
            $(this).hide(); // hide it when it is done.
        });
}); 

查看:

 <div class='load-ajax'></div> ///loading image div///

  <div class="button"> ///ajax trigger link///
        <%= link_to "Generate Mockups",  { :controller => :ideas, :action => 
      :generate_mockups, remote: true, :id => idea.permalink, :class => 'button'} %>
  </div>

CSS:

.load-ajax {
    float:right;
    background-image: image-url("ajax-loader.gif");
    width:150px;
    height:20px;
    background-position: center;
    background-repeat: no-repeat;
}

Controller :

   def generate_mockups
    @idea = Idea.find_by_permalink(params[:id])
    begin
      @idea.generate_mockups
      rescue Exception => e
      flash[:error] = "There was an error generating the mockups for #
 {@idea.working_name}! # {e.message}"
    end
    respond_to do |format|
      flash.now[:notice] = "Successfully generated mockups for #{@idea.working_name}"
      format.html {redirect_to idea_url(params[:id])}
      format.js
    end
  end

当我在 chrome 中观看这个表达式时，我得到了这个:

$('.load-ajax').ajaxStart: function ( fn ){
arguments: null
caller: null

知道为什么吗？

Answer 1

这是对我有用的代码:

$(function() {
    $('.load-ajax').hide();
    $(document).ajaxStart(function() {
        $('.load-ajax').show();
   });
   $(document).ajaxStop(function() {
        $('.load-ajax').hide();
   });
});