ajax在rails中加载图像

Question

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

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

我已经查找了很多方法来做到这一点。我尝试过创建一个新的部分，使用带有url标签和数据标签的js中的ajax代码，在css中隐藏图像，然后在ajax start上显示它，但似乎什么都不起作用。

这就是我所拥有的：

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;
}

控制器：

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

Answer 2

Ajax加载图像实际上非常简单

当触发ajax调用的事件为时，您只需调用并附加图像。您当前的设置集中在加载元素上，而它应该在ajax调用上

目前，您正在执行以下操作：

  .ajaxStart(function() {
            $(this).show(); // show on any Ajax event.
   })

你想要的是：

$(".your_trigger_element").on("click", function() {
    $(".load_ajax").show();

    $.ajax({
       url: *****,
       success: function(data) {
           $(".load_ajax").hide();
       },
       error: function(data) {
           $(".load_ajax").hide();
       }
    })

});

或者，如果您希望整个页面都使用Ajax加载器，则可以使用this code

$(document).ajaxStart(function(){
  $(".load_ajax").show();
});