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?
Here's the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Multi-page template</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<link rel="stylesheet" href="http://jquerymobile.com/branches/tables/css/themes/default/jquery.mobile.css">
<link rel="stylesheet" href="http://jquerymobile.com/branches/tables/docs/_assets/css/jqm-docs.css">
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<form id="test" method="post">
<!-- Start of page: #p01 -->
<div data-role="page" id="p01" data-theme="b" data-prefetch>
<div data-role="header" data-theme="a">
<h1>Page 01 of 05</h1>
</div><!-- /header -->
<div data-role="content" >
<h3>Please provide these details about the child</h3>
<br/>
<fieldset>
<label>Child's Full Name:</label>
<fieldset>
<input id = "p01_childFirstName_text" type="text" placeholder="First Name...">
<input id = "p01_childMidName_text" type="text" placeholder="Middle Name...">
<input id = "p01_childLastName_text" type="text" placeholder="Last Name...">
</fieldset>
</fieldset>
<br/>
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Child's Gender:</legend>
<input data-theme="a" type="radio" name="radio-choice" id="p01_childGenderMale_radio" value="choice-1" checked="checked" />
<label for="p01_childGenderMale_radio">Female</label>
<input data-theme="a" type="radio" name="radio-choice" id="p01_childGenderFemale_radio" value="choice-2" />
<label for="p01_childGenderFemale_radio">Male</label>
<input data-theme="a" type="radio" name="radio-choice" id="p01_childGenderOther_radio" value="choice-3" />
<label for="p01_childGenderOther_radio">Other</label>
</fieldset>
<br/>
<fieldset>
<label for = "p01_childEthnGroup_text">Child's Ethnic Group or Race:</label>
<input id = "p01_childEthnGroup_text" type="text" placeholder="Ethnic Group...">
</fieldset>
<br/>
<fieldset>
<label for="p01_childBirthDate_text">Child's Birth Date:</label>
<input id = "p01_childBirthDate_text" type="text" placeholder="DD/MM/YYYY">
</fieldset>
<br/>
<fieldset>
<label for="p01_childBirthDate_text">Child's Grade in School:</label>
<input id = "p01_childBirthDate_text" type="text" placeholder="DD/MM/YYYY">
</fieldset>
<br/>
<fieldset>
<label for="flip-1">Is the Child attending a School?</label>
<select name="flip-1" id="flip-1" data-role="slider" data-theme="a">
<option value="off">Yes</option>
<option value="on">No</option>
</select>
</fieldset>
</div><!-- /content -->
<div data-role="footer" data-theme="a">
<p class = "footer_text"><small><em>Please swipe the page to the sides to go to the next page, or to return to the previous one.</em></small></p>
</div><!-- /footer -->
</div><!-- /page one -->
<!-- Start of page: #p02 -->
<div data-role="page" id="p02" data-theme="b" data-prefetch>
<div data-role="header" data-theme="a">
<h1>Page 02 of 05</h1>
</div><!-- /header -->
<div data-role="content" data-theme="b">
<h3>Please provide these details about the child's parent</h3>
<p><small><em>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.
</em></small></p>
<br/>
<fieldset>
<label for="p02_fatherWorkType_text">Father's Type of Work:</label>
<input id = "p02_fatherWorkType_text" type="text" placeholder="Type of Work...">
</fieldset>
<br/>
<fieldset>
<label for="p02_motherWorkType_text">Mother's Type of Work:</label>
<input id = "p02_motherWorkType_text" type="text" placeholder="Type of Work...">
</fieldset>
<br/>
<fieldset>
<label>Your Full Name:</label>
<fieldset>
<input id = "p02_userFirstName_text" type="text" placeholder="First Name...">
<input id = "p02_userMidName_text" type="text" placeholder="Middle Name...">
<input id = "p02_userLastName_text" type="text" placeholder="Last Name...">
</fieldset>
</fieldset>
<br/>
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Your Gender:</legend>
<input data-theme="a" type="radio" name="radio-choice" id="p02_userGenderMale_radio" value="choice-1" checked="checked" />
<label for="p02_userGenderMale_radio">Female</label>
<input data-theme="a" type="radio" name="radio-choice" id="p02_userGenderFemale_radio" value="choice-2" />
<label for="p02_userGenderFemale_radio">Male</label>
<input data-theme="a" type="radio" name="radio-choice" id="p02_userGenderOther_radio" value="choice-3" />
<label for="p02_userGenderOther_radio">Other</label>
</fieldset>
<br/>
<fieldset data-role="controlgroup">
<legend>Your Relation with the Child:</legend>
<input data-theme="a" type="radio" name="radio-choice" id="p02_userRelationBio_radio" value="choice-1" checked="checked" />
<label for="p02_userRelationBio_radio">Biological Parent</label>
<input data-theme="a" type="radio" name="radio-choice" id="p02_userRelationAdopt_radio" value="choice-2" />
<label for="p02_userRelationAdopt_radio">Adoptive Parent</label>
<input data-theme="a" type="radio" name="radio-choice" id="p02_userRelationStep_radio" value="choice-3" />
<label for="p02_userRelationStep_radio">Step Parent</label>
<input data-theme="a" type="radio" name="radio-choice" id="p02_userRelationGrand_radio" value="choice-3" />
<label for="p02_userRelationGrand_radio">Grand Parent</label>
<input data-theme="a" type="radio" name="radio-choice" id="p02_userRelationFoster_radio" value="choice-3" />
<label for="p02_userRelationFoster_radio">Foster Parent</label>
<input data-theme="a" type="radio" name="radio-choice" id="p02_userRelationOther_radio" value="choice-3" />
<label for="p02_userRelationOther_radio">Others (Please Specify)</label>
<input class= "p02_input_hidden_text" id = "p02_userRelationOther_text" type="text" placeholder="Specify Relation...">
</fieldset>
</div><!-- /content -->
<div data-role="footer" data-theme="a">
<p class = "footer_text"><small><em>Please swipe the page to the sides to go to the next page, or to return to the previous one.</em></small></p>
</div><!-- /footer -->
</div><!-- /page two -->
<!-- Start of page: #p05 -->
<div data-role="page" id="p05" data-theme="b" data-prefetch>
<div data-role="header" data-theme="a">
<h1>Last Page</h1>
</div><!-- /header -->
<div data-role="content" data-theme="b">
<h2>Congratulations! You have filled out the Child Behaviour Checklist.</h2>
<p><small><em>Please click on the "SUBMIT" button below to send us the checklist.</em></small></p>
<br/>
<br/>
<br/>
<button type="submit" data-theme="a" class="ui-btn-hidden" data-disabled="false">Submit</button>
</div><!-- /content -->
</div><!-- /page five -->
</form>
<style>
.footer_text {
text-align:center;
}
</style>
<script>
$( 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')
}
});
});
</script>
</body>
</html>