Show ajax spinner, hide page render until ALL ajax calls complete?

Question

I'm building a web app with a lot of ajax calls, 100+ which I'm using to inject all my content in my web app.

I was hoping to find a way to hide the page and show the ajax spinner until all the ajax calls are complete... and/or the whole app is loaded, then display the site.

otherwise the user can navigate pages that A. might not be fully rendered correctly or B. will be mid navigation when the site refreshes to Home when fully loaded.

I came across the guts of a solution but not sure how to implement. or put the two together... college project so far from a pro but these looked promising...

https://stackoverflow.com/a/14038050

 $(document).ajaxStop(function () {
      // $.active == 0 
  });

https://stackoverflow.com/a/12313138/2676129

$(document).ajaxStart(function() {
    $.mobile.loading('show');
});

$(document).ajaxStop(function() {
    $.mobile.loading('hide');
});

How might I get this to work? my ajax calls are referenced across a number of .js files (different sections of app)

thanks very much for any help!

edit : example ajax call used

$.ajax(
        {
            url: "http://myurl",
            type: 'get',
            dataType: 'jsonp',
            success: function(data)
            {
                if (data.result == 'success')
                {
                    var previousPageID = "";
                    var currentPageID = "";
                    $.each(data.data, function(key, data)                 //scans through each Lv1 Category, creates a button and page and links thems.
                    {
                        var divLabel = data.label;
                        var pageID = currentPageID + data.label.replace(/\s/g, "");
                        $('#contentPage').append(generateButtons(pageID, divLabel));                                                       //generates a normal button for a category from CMS and generates the relevant page to link to.
                        var previousPageID = currentPageID;
                        generateNextPage(data, previousPageID);
                    });
                    $("#Page").trigger("create");                                              //once html is injected into home <div> applies jquery mobile styling and effects (enhance)
                }
            }
        });

Answer 1

Just wanted to point out a simpler solution but yet effective. You will need to append this loading div to your page.

<div id="loading"></div>

After that with the following we make sure that this div is going to be shown or hidden whenever an ajax call starts and stops respectively.

    $(document).ajaxStop(function () {
        $('#loading').hide();
    });

    $(document).ajaxStart(function () {
        $('#loading').show();
    });

Lastly, add the following CSS to ensure that the the div will display full screen like a blocked UI element (which suggests that the page is loading something/ instead of the spinner).

#loading {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,.5);
    -webkit-transition: all .5s ease;
    z-index: 1000;
    display:none;
}

Demo JSFIDDLE here

Answer 2

One approach would be to display your loading animation as part of your initial page & page load.

Then, wait for your outstanding ajax calls to reach zero and once that happens, hide the loading animation.

Your document ready would look something like:

$(document).ready(function() {
    $('#spinner').addClass('spin');

    function stopSpinner() {
        $('#loading').addClass('hide');
        $('#loading').one('webkitTransitionEnd', function() {
            $('#loading').hide();
        });
    }

    $(document).ajaxStop(function () {
        // $.active == 0 
        stopSpinner();
    });
});

Your markup would have something like this as the last elements in the body:

<div id="loading">
    <div id="spinner"></div>
</div>

With styles like this:

#loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,.5);
    -webkit-transition: all .5s ease;
    z-index: 1000;
}

#loading.hide {
    opacity: 0;
}

#spinner {
    position: absolute;
    width: 100px;
    height: 100px;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    background-color: yellow;
    -webkit-transition: all 1000s linear;
}

#spinner.spin {
    -webkit-transform: rotate(100000deg);
}

The really long transition time and large rotation are there to simulate a forever animation. You could also replace this with an a CSS3 animation, animated GIF or other to get the effect you want.

Demo fiddle (note: it just uses setTimeout to fake the callback to hide the loader)