Rails - 在 AJAX 请求正在进行时显示加载器答案

【问题标题】：Rails - displaying loader while the AJAX request is in progressRails - 在 AJAX 请求正在进行时显示加载器
【发布时间】：2012-04-05 21:48:27
【问题描述】：

我有一个表单，当这个表单通过 AJAX 发送时，我会显示 ajax-loader 图像，然后当请求完成时，我想在 2 秒内隐藏这个加载器。不幸的是，在实践中，ajax-loader 总是只显示在 0.5s 上（只是我的估计）。奇怪的是，CSS 类 transparent 在 2 秒内隐藏，但图像加载器没有。

忽略我一些重要的事情？为什么图片加载器不是在 2 秒内隐藏，而是在 0.5 秒内隐藏？

update_page.html.haml

  %h1 Update
= render :partial => 'update_it'

_update_it.html.haml

%section#update_it
  = form_for(@user, :remote => true, :html => {:class => 'form-horizontal'}) do |f|
    ...
    = submit_tag 'Save changes', :id => 'update_information'

update.js.haml

$('#update_it').html("#{escape_javascript(render(:partial => 'update_it'))}");
setTimeout(function() {
  $('section#update_it').removeClass('transparent')
} , 2000);

script.js

$(document).ready(function(){
  $("#update_information").click(function(){
    $('section#update_it').addClass('transparent');
    $('.transparent').append('<img src="/assets/ajax-loader.gif" alt="" id="loader" class="loader" />');
  });
});

编辑我忘了一件事 - 当我第一次点击提交按钮时，使用 CSS 类 transparent，但是当我第二次点击按钮时，已经没有了.为什么？有什么问题？

【问题讨论】：

标签： jquery css ajax ruby-on-rails-3 settimeout

【解决方案1】：

对不起，我的直截了当，但我认为你把简单的事情复杂化了。

尝试使用 jQuery 的 ajax 回调函数（例如 ajaxStart()）重新实现“ajax 加载器”。（见：http://api.jquery.com/ajaxStart/）

一旦 ajax 完成，使用另一个回调函数，例如“success”或“complete”来替换 ajax-loader。（见http://api.jquery.com/jQuery.ajax/）

【讨论】：