javascript - 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与一组延期。在每个 .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(); });
 }