AJAX call working fine but the loading gif disappears too quick

Question

I am working on an AJAX call which is updating records and fetching the latest records as well and then loading multiple DIV, the process of updating the fetching is working perfectly fine except that I am displaying the loading gif while this process is taking place. The gif appears but then disappears too quick. I am wondering how to keep this loading giv on screen till the entire process is complete.

This is my AJAX call

<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>

This is my loading div that appears with gif image

<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>

This is the CSS of loading div

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

I will really appreciate any help here

Answer 1

You can use $.when with a group of deferreds. In each of the .load() calls, have a callback that resolves the related deferred. Obviously this example is overly verbose to be clear what it's doing, but you can improve it by storing the URLs in an array and use a loop.

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

This should be what you want.

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