0

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

更新.js.haml

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

脚本.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 class transparent，但是当我第二次单击该按钮时，就已经没有了。为什么？有什么问题？

4

1 回答 1

4

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

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

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

于 2012-04-05T22:42:11.563 回答