jquery - 如何在追加查询中放置加载器？

Question

对..我有以下内容：

$(document).ready(function() {
  var index = 2;
  $('#addElement').click(function() {
    var data = 'index='+index;
    $.get('/ajax/lo_add.php', data, function(response){
      var new_div = $(response).hide();
      $('#dynform').append(new_div);
      new_div.slideDown();
      $(".chzn-select").chosen();
      $('.onlyNums input').autotab_magic().autotab_filter('numeric');
      index++;
    });
  });
});

这花了我一整天的时间让它正常工作（这里是非常新的）.. 事情是我怎样才能放置加载图像（loader.gif），让我们在 div 调用“loader”中说，同时进行附加过程。也许有一个延迟功能用于测试目的，就像测试它的加载会话一样。

Answer 1

您可以在调用 ajax 之前显示加载器并将其隐藏在 slideDown 方法的回调中。

$(document).ready(function() {

  $("#loader").hide();
  var index = 2;

  $('#addElement').click(function() {

     $("#loader").html("loading..").fadeIn(400,function(){
        var data = 'index='+index;
       $.get('/ajax/lo_add.php', data, function(response){

            var new_div = $(response);
            new_div.appendTo($('#dynform')).slideDown(100,function(){

              $(".chzn-select").chosen();
              $('.onlyNums input').autotab_magic().autotab_filter('numeric');
              index++;
              $("#loader").fadeOut(300);

            });     
       });

    });

  });

});

您可以通过将其更改为来显示图像而不是加载文本

$("#loader").html("<img src='someLoader.gif' />").fadeIn(400,function(){