title: Show ajax spinner, hide page render until ALL ajax calls complete?
body: <p>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. </p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>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...</p>
  
  <p><a href="https://stackoverflow.com/a/14038050">https://stackoverflow.com/a/14038050</a></p>
  
  <pre><code> $(document).ajaxStop(function () {
        // $.active == 0 
    });
  </code></pre>
  
  <p><a href="https://stackoverflow.com/a/12313138/2676129">https://stackoverflow.com/a/12313138/2676129</a></p>
  
  <pre><code>$(document).ajaxStart(function() {
      $.mobile.loading('show');
  });
  
  $(document).ajaxStop(function() {
      $.mobile.loading('hide');
  });
  </code></pre>
  
  <p>How might I get this to work? my ajax calls are referenced across a number of .js files (different sections of app)</p>
  
  <p>thanks very much for any help!</p>
  
  <p>edit : example ajax call used </p>
  
  <pre><code>$.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 &lt;div&gt; applies jquery mobile styling and effects (enhance)
                  }
              }
          });
  </code></pre>