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

【问题标题】：AJAX call working fine but the loading gif disappears too quickAJAX 调用工作正常，但加载 gif 消失得太快
【发布时间】：2014-08-09 21:20:50
【问题描述】：

我正在处理一个 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;
}

我将非常感谢这里的任何帮助

【问题讨论】：

@AnoopJoshi 代码工作正常，除了显示加载栏的加载 div 消失得太快，我什至尝试过 fadeOut 但这也无济于事
这里需要ajax什么？您不使用从该 ajax 调用返回的 html。
你为什么要做所有这些负载？您应该只发布一次，然后得到响应并使用响应来更新页面
可能你的装载机图片是逃犯..!!
@A.Wolff 我删除了我的评论...应该在不同的线程上发布...感谢您的指点... ;)

标签： javascript jquery html css ajax

【解决方案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(); });
 }

【讨论】：

我正在检查您的解决方案，很快就会回复
我已经尝试过你的代码，但是dvloader 没有隐藏，它会一直持续下去
检查您的代码是否与答案完全一致，因为这应该可以工作。您可以在此演示中看到它的工作原理：jsfiddle.net/hC9Tu 同时检查您是否拥有代码中显示的 ID 的所有 4 个元素，如果缺少任何元素，则加载图像将继续显示。
非常感谢代码现在工作正常，在网络选项卡上，很少有脚本给出 404 错误，一旦我排序它似乎工作正常，除了加载 gif 现在卡住了 :) 它确实消失了虽然一旦一切都完成加载。它开始很好，但在中间加载栏卡住了。知道如何解决吗？卡住是指它冻结了几秒钟。
你在任何地方都在做同步 ajax 吗？这可能会导致 gif 暂停。此外，如果您在可能是它的加载调用中插入大量内容。这里有更多信息stackoverflow.com/questions/191413/…

【解决方案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);
            }
});

【讨论】：

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