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>

这是我的加载div，带有gif图像

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

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

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

2 个答案: