title: Hide Loading spinner after ajax complete event
body: <p>I'm using JQuery Mobile 1.4.0 to build cross platform app and will be build by phonegap. For example I had two pages, one is #homepage, another is #detail page</p>
  
  <pre><code>&lt;div id="home" data-role="page&gt; Home Page 
     &lt;a href="#detail"&gt;Go Detail&lt;/a&gt;
  &lt;/div&gt;
  &lt;div id="detail" data-role="page&gt; Detail Page &lt;/div&gt;
  </code></pre>
  
  <p>JQuery Mobile default use ajax to load pages into DOM which is fine, my problem is that, before detail page show, I need get data from remote server via ajax call. I register ajaxStart and ajaxComplete event on document to show and show/hide spinner.</p>
  
  <pre><code>$(document).ajaxStart(function(){
    $.mobile.loading('show');
  });
  $(document).ajaxComplete(function(){
    $.mobile.loading('hide');
  });
  </code></pre>
  
  <p>The problem is jquery mobile hide the loading spinner before ajaxComplete called in transition method, so actually $.mobile.loading('hide') will be called twice. That's not good because data haven't been populated into DOM so the detail page will be white blank then after a while data was inserted. </p>
  
  <p>If you don't know what I'm saying, you could look into jquery mobile source code and you can see line 5070</p>
  
  <pre><code>this._triggerCssTransitionEvents( to, from, "before" );
  
  // TODO put this in a binding to events *outside* the widget
  this._hideLoading();
  </code></pre>
  
  <p>So my question is how to really hide the loading spinner after ajaxComplete not after page transition?</p>
  
  <p>Thanks very much for your help.</p>