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

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();
     }
});

ajax request 完成后不要隐藏加载器。