title: How can I improve the page transitions for my Jquery mobile app?
body: <p>I have created a tiny Jquery Mobile app in a single HTML page.
  The problem I am facing is that the performance of page transitions in Mobile devices is horrendous. After I swipe to goto next page, I end up waiting for 3-4 seconds befoe the page changes.
  Any ideas how I can improve it?</p>
  
  <p>Here's the code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt; 
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt; 
      &lt;title&gt;Multi-page template&lt;/title&gt; 
  
      &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /&gt;
      &lt;link rel="stylesheet" href="http://jquerymobile.com/branches/tables/css/themes/default/jquery.mobile.css"&gt;  
      &lt;link rel="stylesheet" href="http://jquerymobile.com/branches/tables/docs/_assets/css/jqm-docs.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;/head&gt; 
  
  
  &lt;body&gt; 
      &lt;form id="test" method="post"&gt;
          &lt;!-- Start of page: #p01 --&gt;
          &lt;div data-role="page" id="p01" data-theme="b" data-prefetch&gt;
  
              &lt;div data-role="header" data-theme="a"&gt;
                  &lt;h1&gt;Page 01 of 05&lt;/h1&gt;
              &lt;/div&gt;&lt;!-- /header --&gt;
  
              &lt;div data-role="content" &gt;
                  &lt;h3&gt;Please provide these details about the child&lt;/h3&gt;
                  &lt;br/&gt;
                  &lt;fieldset&gt;
                      &lt;label&gt;Child's Full Name:&lt;/label&gt;
                      &lt;fieldset&gt;
                          &lt;input id = "p01_childFirstName_text" type="text" placeholder="First Name..."&gt;
                          &lt;input id = "p01_childMidName_text" type="text" placeholder="Middle Name..."&gt;
                          &lt;input id = "p01_childLastName_text" type="text" placeholder="Last Name..."&gt;
                      &lt;/fieldset&gt;
                  &lt;/fieldset&gt;    
                  &lt;br/&gt;
                  &lt;fieldset data-role="controlgroup" data-type="horizontal"&gt;
                      &lt;legend&gt;Child's Gender:&lt;/legend&gt;
                          &lt;input data-theme="a" type="radio" name="radio-choice" id="p01_childGenderMale_radio" value="choice-1" checked="checked" /&gt;
                          &lt;label for="p01_childGenderMale_radio"&gt;Female&lt;/label&gt;
  
                          &lt;input data-theme="a" type="radio" name="radio-choice" id="p01_childGenderFemale_radio" value="choice-2"  /&gt;
                          &lt;label for="p01_childGenderFemale_radio"&gt;Male&lt;/label&gt;
  
                          &lt;input data-theme="a" type="radio" name="radio-choice" id="p01_childGenderOther_radio" value="choice-3"  /&gt;
                          &lt;label for="p01_childGenderOther_radio"&gt;Other&lt;/label&gt;
                  &lt;/fieldset&gt;
                  &lt;br/&gt;
                  &lt;fieldset&gt;
                      &lt;label for = "p01_childEthnGroup_text"&gt;Child's Ethnic Group or Race:&lt;/label&gt;
                      &lt;input id = "p01_childEthnGroup_text" type="text" placeholder="Ethnic Group..."&gt;
                  &lt;/fieldset&gt;
                  &lt;br/&gt;
                  &lt;fieldset&gt;
                      &lt;label for="p01_childBirthDate_text"&gt;Child's Birth Date:&lt;/label&gt;
                      &lt;input id = "p01_childBirthDate_text" type="text" placeholder="DD/MM/YYYY"&gt;
                  &lt;/fieldset&gt;  
                  &lt;br/&gt;
                  &lt;fieldset&gt;
                      &lt;label for="p01_childBirthDate_text"&gt;Child's Grade in School:&lt;/label&gt;
                      &lt;input id = "p01_childBirthDate_text" type="text" placeholder="DD/MM/YYYY"&gt;
                  &lt;/fieldset&gt;  
                  &lt;br/&gt;
                  &lt;fieldset&gt;
                      &lt;label for="flip-1"&gt;Is the Child attending a School?&lt;/label&gt;
                      &lt;select name="flip-1" id="flip-1" data-role="slider" data-theme="a"&gt;
                          &lt;option value="off"&gt;Yes&lt;/option&gt;
                          &lt;option value="on"&gt;No&lt;/option&gt;
                      &lt;/select&gt;   
                  &lt;/fieldset&gt;  
  
              &lt;/div&gt;&lt;!-- /content --&gt;
  
              &lt;div data-role="footer" data-theme="a"&gt;
                      &lt;p class = "footer_text"&gt;&lt;small&gt;&lt;em&gt;Please swipe the page to the sides to go to the next page, or to return to the previous one.&lt;/em&gt;&lt;/small&gt;&lt;/p&gt;
              &lt;/div&gt;&lt;!-- /footer --&gt;
  
          &lt;/div&gt;&lt;!-- /page one --&gt;
  
          &lt;!-- Start of page: #p02 --&gt;
          &lt;div data-role="page" id="p02" data-theme="b" data-prefetch&gt;
  
              &lt;div data-role="header" data-theme="a"&gt;
                  &lt;h1&gt;Page 02 of 05&lt;/h1&gt;
              &lt;/div&gt;&lt;!-- /header --&gt;
  
              &lt;div data-role="content" data-theme="b"&gt;    
                  &lt;h3&gt;Please provide these details about the child's parent&lt;/h3&gt;
                  &lt;p&gt;&lt;small&gt;&lt;em&gt;Please enter these details even if the parents are not working now. 
                                Be specific - for example: auto mechanic, high school teacher, home maker, 
                                day labourer, lathe operator, army sergeant etc.
                  &lt;/em&gt;&lt;/small&gt;&lt;/p&gt;
                  &lt;br/&gt;
                  &lt;fieldset&gt;
                      &lt;label for="p02_fatherWorkType_text"&gt;Father's Type of Work:&lt;/label&gt;
                      &lt;input id = "p02_fatherWorkType_text" type="text" placeholder="Type of Work..."&gt;
                  &lt;/fieldset&gt;  
                  &lt;br/&gt;
                  &lt;fieldset&gt;
                      &lt;label for="p02_motherWorkType_text"&gt;Mother's Type of Work:&lt;/label&gt;
                      &lt;input id = "p02_motherWorkType_text" type="text" placeholder="Type of Work..."&gt;
                  &lt;/fieldset&gt;  
                  &lt;br/&gt;
                  &lt;fieldset&gt;
                      &lt;label&gt;Your Full Name:&lt;/label&gt;
                      &lt;fieldset&gt;
                          &lt;input id = "p02_userFirstName_text" type="text" placeholder="First Name..."&gt;
                          &lt;input id = "p02_userMidName_text" type="text" placeholder="Middle Name..."&gt;
                          &lt;input id = "p02_userLastName_text" type="text" placeholder="Last Name..."&gt;
                      &lt;/fieldset&gt;
                  &lt;/fieldset&gt;    
                  &lt;br/&gt;
                   &lt;fieldset data-role="controlgroup" data-type="horizontal"&gt;
                      &lt;legend&gt;Your Gender:&lt;/legend&gt;
                          &lt;input data-theme="a" type="radio" name="radio-choice" id="p02_userGenderMale_radio" value="choice-1" checked="checked" /&gt;
                          &lt;label for="p02_userGenderMale_radio"&gt;Female&lt;/label&gt;
  
                          &lt;input data-theme="a" type="radio" name="radio-choice" id="p02_userGenderFemale_radio" value="choice-2"  /&gt;
                          &lt;label for="p02_userGenderFemale_radio"&gt;Male&lt;/label&gt;
  
                          &lt;input data-theme="a" type="radio" name="radio-choice" id="p02_userGenderOther_radio" value="choice-3"  /&gt;
                          &lt;label for="p02_userGenderOther_radio"&gt;Other&lt;/label&gt;
                  &lt;/fieldset&gt;
                  &lt;br/&gt;
                   &lt;fieldset data-role="controlgroup"&gt;
                      &lt;legend&gt;Your Relation with the Child:&lt;/legend&gt;
                          &lt;input data-theme="a" type="radio" name="radio-choice" id="p02_userRelationBio_radio" value="choice-1" checked="checked" /&gt;
                          &lt;label for="p02_userRelationBio_radio"&gt;Biological Parent&lt;/label&gt;
  
                          &lt;input data-theme="a" type="radio" name="radio-choice" id="p02_userRelationAdopt_radio" value="choice-2"  /&gt;
                          &lt;label for="p02_userRelationAdopt_radio"&gt;Adoptive Parent&lt;/label&gt;
  
                          &lt;input data-theme="a" type="radio" name="radio-choice" id="p02_userRelationStep_radio" value="choice-3"  /&gt;
                          &lt;label for="p02_userRelationStep_radio"&gt;Step Parent&lt;/label&gt;
  
                          &lt;input data-theme="a" type="radio" name="radio-choice" id="p02_userRelationGrand_radio" value="choice-3"  /&gt;
                          &lt;label for="p02_userRelationGrand_radio"&gt;Grand Parent&lt;/label&gt;
  
                          &lt;input data-theme="a" type="radio" name="radio-choice" id="p02_userRelationFoster_radio" value="choice-3"  /&gt;
                          &lt;label for="p02_userRelationFoster_radio"&gt;Foster Parent&lt;/label&gt;
  
                          &lt;input data-theme="a" type="radio" name="radio-choice" id="p02_userRelationOther_radio" value="choice-3"  /&gt;
                          &lt;label for="p02_userRelationOther_radio"&gt;Others (Please Specify)&lt;/label&gt;
                          &lt;input class= "p02_input_hidden_text" id = "p02_userRelationOther_text" type="text" placeholder="Specify Relation..."&gt;
  
                  &lt;/fieldset&gt;
  
              &lt;/div&gt;&lt;!-- /content --&gt;
  
              &lt;div data-role="footer" data-theme="a"&gt;
                      &lt;p class = "footer_text"&gt;&lt;small&gt;&lt;em&gt;Please swipe the page to the sides to go to the next page, or to return to the previous one.&lt;/em&gt;&lt;/small&gt;&lt;/p&gt;
              &lt;/div&gt;&lt;!-- /footer --&gt;
  
          &lt;/div&gt;&lt;!-- /page two --&gt;
  
  
  
           &lt;!-- Start of page: #p05 --&gt;
          &lt;div data-role="page" id="p05" data-theme="b" data-prefetch&gt;
  
              &lt;div data-role="header" data-theme="a"&gt;
                  &lt;h1&gt;Last Page&lt;/h1&gt;
              &lt;/div&gt;&lt;!-- /header --&gt;
  
              &lt;div data-role="content" data-theme="b"&gt;    
                  &lt;h2&gt;Congratulations! You have filled out the Child Behaviour Checklist.&lt;/h2&gt;
                  &lt;p&gt;&lt;small&gt;&lt;em&gt;Please click on the "SUBMIT" button below to send us the checklist.&lt;/em&gt;&lt;/small&gt;&lt;/p&gt;
                  &lt;br/&gt;
                  &lt;br/&gt;
                  &lt;br/&gt;
                  &lt;button type="submit" data-theme="a" class="ui-btn-hidden" data-disabled="false"&gt;Submit&lt;/button&gt;
  
              &lt;/div&gt;&lt;!-- /content --&gt;
  
  
          &lt;/div&gt;&lt;!-- /page five --&gt;
  
      &lt;/form&gt;
      &lt;style&gt;
          .footer_text {
              text-align:center;
          }
      &lt;/style&gt;
  
      &lt;script&gt;
      $( document ).on( 'mobileinit', function(){
          $.mobile.loader.prototype.options.text = "loading...";
          $.mobile.loader.prototype.options.textVisible = false;
          $.mobile.loader.prototype.options.theme = "a";
          $.mobile.loader.prototype.options.html = "";
      });
      $(document).on ('pageshow', function (e, data) {         
          // keep all previously-visited pages in the DOM. Remove this option later when application becomes large.
          $.mobile.page.prototype.options.domCache = true;
  
          var activePage = $.mobile.activePage.attr("id");
          var previousPage = (parseInt(activePage.slice(1,3))-1).toString();
          var nextPage = (parseInt(activePage.slice(1,3))+1).toString();
  
          window.myActivePage = activePage;
          window.myPreviousPage = "#p0" + previousPage;
          window.myNextPage = "#p0" + nextPage;
  
      });
      // page navigation on using swipes
      $(document).on('swipeleft',function(event, ui){
              $.mobile.changePage(window.myNextPage, { transition: "slide"});
          });
      $(document).on('swiperight',function(event, ui){
              $.mobile.changePage(window.myPreviousPage, { transition: "slide", reverse:true});
          });
  
      // Code to show and hide fields. Spaghetti code. Refactor this when working on actual app.
      $(document).ready(function() {
          $('[id=p02_userRelationOther_text]').hide()
          $('[type=radio]').click(function(eventName) {
              if (this.id == 'p02_userRelationOther_radio') {
                  $('[id=p02_userRelationOther_text]').show('slow')
              }
              else {
                  $('[id=p02_userRelationOther_text]').hide('slow')
              }
          });
  
          $('[id=p03_noSports_check]').click(function(eventName) {
              if ($('[id=p03_noSports_check]').is(":checked")) {
                  $('[class=p03_hidden_container]').hide('slow')
              }
              else {
              $('[class=p03_hidden_container]').show('slow')
              }
          });
  
          $('[id=p04_noHobby_check]').click(function(eventName) {
              if ($('[id=p04_noHobby_check]').is(":checked")) {
                  $('[class=p04_hidden_container]').hide('slow')
              }
              else {
              $('[class=p04_hidden_container]').show('slow')
              }
          });
      });
      &lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>