4

我正在尝试在我的 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;
}

控制器：

   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

知道为什么吗？

4

2 回答 2

5

这是对我有用的代码：

$(function() {
    $('.load-ajax').hide();
    $(document).ajaxStart(function() {
        $('.load-ajax').show();
   });
   $(document).ajaxStop(function() {
        $('.load-ajax').hide();
   });
});
于 2013-11-13T15:46:25.770 回答
3

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 加载器，您可以使用以下代码：

$(document).ajaxStart(function(){
  $(".load_ajax").show();
});
于 2013-11-13T09:37:46.100 回答