显示加载图标，然后重定向到新页面

Question

可以说我有一个页面“page1”，它由一些信息和一个名为“Add”的按钮组成。

当我点击这个按钮时，它会打开一个弹出式模式窗口，它由一个大约有10个字段的窗体组成，并提交按钮。一旦我点击这个按钮，我用ajax post提交表单，并在服务器端插入并更新操作并返回成功或失败结果。

在这个ajax过程中，我显示一个加载图像。我正在尝试的是在这个加载映像之后它应该重定向到新的页面。让我们说“page2”。但在我的代码中，我看到加载停止后，我看到模式窗口和“page1”大约2-3秒，然后只有它重定向到“page2”。

我不确定我的问题是否合乎逻辑，但仍然有任何方法可以阻止它。 下面我有一个ajax处理代码。

谢谢。

$.ajax({ 
     type: 'POST', 
     url: 'page2.php', 
     data: { 
      'data': form_data 
     }, 
     success: function(response) 
     { 
      var arr = JSON.parse(response); 
      if(arr.success == true) { 
       window.location.href = 'page3.php'; 
      } 
      else { 
       alert('There are some error while saving record.'); 
      } 
     }, 
     beforeSend: function() 
     { 
      $('.loader').show().delay(9000); 
     }, 
     complete: function(){ 
      $.fancybox.close(); 
      $('.loader').hide(); 
     } 
    }); 

Answer 1

$.ajax({ 
    success: function(response) 
    { 
     ... 
     if(arr.success == true) { 
      ... 
     } 
     else { 
      ... 
      $('.loader').hide(); 
     } 
    }, 
    ... 
    complete: function(){ 
     $.fancybox.close(); 
    } 
}); 

ajaxrequest完成后不要隐藏装载机。