title: jQuery mobile - progress bar (loading bar) not working (stopped) until all elements are rendered
body: <p>My problems is that when a page loads, a progress bar (or loading bar) is stopped until all the data (from the server) is parsed and all the UI elements are rendered. I tried to put locations of the code differently which initializes the progress bar, such as in the pageshow(), pagecreate(), </p>
  
  <pre><code>$("#dataHome").on('pagecreate', function() {    
  
      $.mobile.showPageLoadingMsg(); // jQM loading bar widget
      ...
  }
  </code></pre>
  
  <p>and even $(window).load(function){ ... }</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(window).load(function() {
          var html = "&lt;img src='css/images/ajax-loader.gif' /&gt;";
          $('#loader').append(html);
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>But, Both ways didn't work for me. The loading bar didn't move while it started to rotate after all UI elements are rendered.</p>
  
  <p>Is there any way for me to make the progress bar working first while the data is parsed and before all elements are loaded? </p>
  
  <p>Sorry for not putting my code.. It's too ugly and hard to make it short.</p>