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加载图像实际上非常简单

你只需要打电话给＆amp;在触发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();
});

ajax在rails中加载图像

2 个答案: