title: splash screen in Jquery mobile android app
body: <p>i have an android app that uses jquery mobile in my web based up. i have a couple of page in my app and i was thinking of putting a splash screen on my app when i load a new page. or when the pages is being load. any suggestions on how to make a splash screen?I'm new in jquery mobile so i need suggestions. I've tried using "$.mobile.showPageLoadingMsg()" but it does not cover the one i want it only shows a message what i want is a whole with an image that fills the entire page. and when the page is ready the splash should just fade out and show the page that is being loaded</p>
  
  <p>this fiddle is an example of "$.mobile.showPageLoadingMsg()" : <a href="http://jsfiddle.net/pmatseykanets/Nvrhb/" rel="nofollow">http://jsfiddle.net/pmatseykanets/Nvrhb/</a></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Test&lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /&gt;
      &lt;script src="http://code.jquery.com/jquery-1.8.2.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"&gt;&lt;/script&gt;
  
      &lt;script&gt;
  
      function doWork(){
          //Append a lot of paragraphs
          for (var i = 0; i &lt; 10000; i++) {
              $("div[data-role=content]").append("&lt;p&gt;This is some long string&lt;/p&gt;");
          }
          $("div[data-role=content]").trigger("refresh");
          $.mobile.loading('hide');
      }
  
      $(document).on("pageinit", "#page1", function(){
  
          $("#btn1").click(function(){
  
              $.mobile.loading('show', {theme:"e", text:"Please wait...", textonly:true, textVisible: true});
  
              //Do something lengthy here
              setTimeout(function(){
                  doWork();
              }, 50);
  
          });
      });
  
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div data-role="page" id="page1"&gt;
          &lt;div data-role="header"&gt;
              &lt;h1&gt;Header&lt;/h1&gt;
          &lt;/div&gt;
  
          &lt;div data-role="content"&gt;
              &lt;a id="btn1" href="#" data-role="button" data-transition="flip"&gt;Do work&lt;/a&gt;
          &lt;/div&gt;
  
          &lt;div data-role="footer" data-position="fixed"&gt;
              &lt;h1&gt;Footer&lt;/h1&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>