AJAX調用工作正常，但加載gif消失得太快

Question

我正在處理一個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>

這是我與gif圖像一起顯示的加載div

<div style="display: none" class="loading_gif" id="dvloader">
     <p><img style="margin-top: 20%;margin-left: 40%;" src="assets/img/loading.gif"></p>
</div>

這是加載div的CSS

.loading_gif{
    margin: auto;
    position: fixed;
    z-index: 1000;
    cursor: wait;
    top: 0;
    left: 0;
    background: #fff;
    height: 100%;
    width: 100%;
    opacity: 0.8;
}

我真的很感激這里的任何幫助

Answer 1

您可以將$.when與一組deferreds一起使用。 在每個.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(); });
 }

Answer 2

這應該是您想要的。

$.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);
            }
});