Question

我有一个表单，当这个表单通过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" />');
  });
});

编辑我忘记了一件事 - 当我第一次点击SUBMIT按钮时，然后使用CSS类transparent，但是当我第二次点击按钮时，已经不是了。为什么？有什么问题？

Answer 1

抱歉，我很坦率，但我认为你让简单的事情复杂化了。

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

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

Rails - 在AJAX请求正在进行时显示加载程序

1 个答案: