在两者之间添加一个旋转加载程序

Question

在两个步骤之间，我想添加一个微调器（目前只是一条消息Loading），这可能吗？

也许是这样的？

$('#loader').show();
   $.ajax({
      success: function(data) {
      //Hide the progress div if loading data is done
      $('#loader').hide();
      }
   });

我的演示JS代码：

var prevLink = '<button class="button cancel" type="button">Cancel</button>';
var nextLink = '<button class="button continue" type="button">Confirm purchase</button>';
var navHTML = '<div class="buttons">' + prevLink + nextLink + '</div>';
var FormData = [];
$(function() {
  $('#stepbystep > fieldset').hide().append(navHTML);
  $('#first-step .cancel').remove();
  $('#last-step .continue').remove();
  $('#first-step').fadeIn();
  setHeight();
  $('button.continue').click(function() {
      var whichStep = $(this).parent().parent().attr('id');            
      if (whichStep == 'first-step') {               
      } else if (whichStep == 'second-step')    {
      } else if (whichStep == 'third-step')     {
      } else if (whichStep == 'fourth-step')    { 
      } else if (whichStep == 'last-step')      {
      }
      $(this).parent().parent().hide(300).next().show(300);
      setHeight();
  });
  $('button.cancel').click(function() {
      $(this).parent().parent().fadeOut(300).prev().fadeIn(300);
  });
})

固定演示：

http://jsfiddle.net/59fNR/2/

Answer 1

您可以注册一个函数，在每个jQuery ajax调用的启动和停止时运行，如下所示：

$(document).ajaxStart(function () {
    $("#loading").show();
}).ajaxStop(function () {
    $("#loading").hide();
});

然后，您不必对每个实际的ajax请求执行任何操作，它将自动运行。只需将#loading更改为loader元素的id即可。