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>
There are few ways:
In case you are using ! html file with multiple pages, wrap them into single div:
and set this css:
js code:
More about this aproach can be found here: http://outof.me/fixing-flickers-jumps-of-jquery-mobile-transitions-in-phonegap-apps/
.ui-page {
-webkit-backface-visibility: hidden;
}
The problem with that solution is that it breaks Select list on your forms.
Turn them off:
Use fastclick on jquery mobile apps to speed click events thus speeding page transitions. Click events can add up to 300ms into page transition. This plugin will do much more then this but in your case it will be enough.
Link: https://github.com/drowne/jquery.mobile.fastclick
In case you don’t want additional plugins you can still achieve faster page transition by removing href from page changing buttons and then doing this:
The touchstart (or touchend) event works great if you know the user won’t be scrolling. That’s actually the reason click events take so long to resolve on mobile devices, the device is waiting to see if the user is scrolling or clicking. So touchstart should not have a delay like common click/tap event.
I hope some of this solutions will help you. Take into consideration, these are not bulletproof solution and they have downsides of they own.