Javascript AJAX调用工作正常，但加载gif消失得太快

我正在处理一个AJAX调用，它更新记录并获取最新记录，然后加载多个DIV，更新获取的过程工作得非常好，只是在这个过程中我正在显示加载的gif。gif出现但消失得太快。我想知道如何保持这个加载giv在屏幕上，直到整个过程完成

这是我的AJAX电话

<script>
    function update() {
        $.ajax({
            type: "POST",
            url: "abc.php",
            data: $("#pay-form").serialize(),
            beforeSend: function () {
                $('#dvloader').show();
            },
            success: function (html) {
                $('#income-expense-div').load('dashboard-sidebar.php');
                $('#pay-div').load('dashboard-pay.php');
                $('#assets-div').load('dashboard-assets.php');
                $('#liabilities-div').load('dashboard-liabilities.php');
                $('#dvloader').hide(500);

            }
        });
    }

</script>

---

我将非常感谢您在这里提供的任何帮助

这应该是您想要的

$.ajax({
            type: "POST",
            url: "abc.php",
            data: $("#pay-form").serialize(),
            beforeSend: function () {
                $('#dvloader').show();
            },
            success: function (html) {
                $('#income-expense-div').load('dashboard-sidebar.php');
                $('#pay-div').load('dashboard-pay.php');
                $('#assets-div').load('dashboard-assets.php');
                $('#liabilities-div').load('dashboard-liabilities.php');
                //$('#dvloader').hide(500);

            },
            complete: function() {
                $('dvloader').hide(500);
            }
});

---

这应该是你想要的

$.ajax({
            type: "POST",
            url: "abc.php",
            data: $("#pay-form").serialize(),
            beforeSend: function () {
                $('#dvloader').show();
            },
            success: function (html) {
                $('#income-expense-div').load('dashboard-sidebar.php');
                $('#pay-div').load('dashboard-pay.php');
                $('#assets-div').load('dashboard-assets.php');
                $('#liabilities-div').load('dashboard-liabilities.php');
                //$('#dvloader').hide(500);

            },
            complete: function() {
                $('dvloader').hide(500);
            }
});

您可以与一组延迟项一起使用。在每个

.load（）

调用中，都有一个用于解析相关延迟事件的回调。显然，这个示例过于冗长，无法清楚地说明它在做什么，但是您可以通过将URL存储在数组中并使用循环来改进它

success: function (html) {
    var load1 = new $.Deferred();
    var load2 = new $.Deferred();
    var load3 = new $.Deferred();
    var load4 = new $.Deferred();

    $.when(load1, load2, load3, load4).then(function(){
        $('#dvloader').hide(500);
    });

    $('#income-expense-div').load('dashboard-sidebar.php', function(){ load1.resolve(); });
    $('#pay-div').load('dashboard-pay.php', function(){ load2.resolve(); });
    $('#assets-div').load('dashboard-assets.php', function(){ load3.resolve(); });
    $('#liabilities-div').load('dashboard-liabilities.php', function(){ load4.resolve(); });
 }

您可以与一组延迟项一起使用。在每个

.load（）

调用中，都有一个用于解析相关延迟事件的回调。显然，这个示例过于冗长，无法清楚地说明它在做什么，但是您可以通过将URL存储在数组中并使用循环来改进它

success: function (html) {
    var load1 = new $.Deferred();
    var load2 = new $.Deferred();
    var load3 = new $.Deferred();
    var load4 = new $.Deferred();

    $.when(load1, load2, load3, load4).then(function(){
        $('#dvloader').hide(500);
    });

    $('#income-expense-div').load('dashboard-sidebar.php', function(){ load1.resolve(); });
    $('#pay-div').load('dashboard-pay.php', function(){ load2.resolve(); });
    $('#assets-div').load('dashboard-assets.php', function(){ load3.resolve(); });
    $('#liabilities-div').load('dashboard-liabilities.php', function(){ load4.resolve(); });
 }

---

---

@AnoopJoshi代码运行良好，除了加载div显示加载条消失得太快之外，我甚至尝试了

fadeOut

，但这都没有帮助ajax在这里需要什么？您没有使用从ajax调用返回的html。为什么要执行所有这些加载？你应该只发布一次，然后得到一个响应，然后使用响应来更新页面可能你的加载程序图像是一个逃犯@我删除了我的评论。。。应该把它贴在另一个帖子上。。感谢您的指点……）@AnoopJoshi代码运行良好，除了加载div显示加载条消失得太快之外，我甚至尝试了

fadeOut

，但这都没有帮助ajax在这里需要什么？您没有使用从ajax调用返回的html。为什么要执行所有这些加载？你应该只发布一次，然后得到一个响应，然后使用响应来更新页面可能你的加载程序图像是一个逃犯@我删除了我的评论。。。应该把它贴在另一个帖子上。。感谢您的指点……）

complete

在这个AJAX调用完成时运行，它不会等待所有其他调用。

complete

在这个AJAX调用完成时运行，它不会等待所有其他调用。我正在检查您的解决方案，会很快回来。我已经尝试了您的代码，但是

dvloader

没有隐藏，它将继续检查您的代码是否与答案完全一致，因为这应该是可行的。你可以在这个演示中看到它的工作原理：同时检查你是否有代码中显示的ID的所有4个元素，如果缺少任何元素，那么加载图像将继续显示。非常感谢代码现在工作正常，在“网络”选项卡上，很少有脚本出现404错误，而且一旦我排序，它似乎工作正常，只是加载的gif现在被卡住了：）它确实消失了，尽管一切都完成了加载。它开始很好，但是在中间，加载条被卡住了。知道怎么解决吗？我说的卡住是指它会冻结几秒钟。你在哪里做过同步ajax吗？这可能会导致gif暂停。此外，如果您在加载调用中插入大量内容，也可能是这样。这里有更多信息，我正在检查您的解决方案，很快就会回来。我已经尝试了您的代码，但是

dvloader

没有隐藏，它将继续检查您的代码是否与答案完全一致，因为这应该可以工作。你可以在这个演示中看到它的工作原理：同时检查你是否有代码中显示的ID的所有4个元素，如果缺少任何元素，那么加载图像将继续显示。非常感谢代码现在工作正常，在“网络”选项卡上，很少有脚本出现404错误，而且一旦我排序，它似乎工作正常，只是加载的gif现在被卡住了：）它确实消失了，尽管一切都完成了加载。它开始很好，但是在中间，加载条被卡住了。知道怎么解决吗？我说的卡住是指它会冻结几秒钟。你在哪里做过同步ajax吗？这可能会导致gif暂停。此外，如果您在加载调用中插入大量内容，也可能是这样。这里有更多的信息