Speeding up page transitions in jQuery Mobile 1.1 for iPhone apps built with PhoneGap?

Question

Page transitions in JQM 1.1 still incur a 1-2 second delay on iPhones, which compromises the user experience.

Has anyone figured out how to make the page transitions

Answer 1

I use a couple of methods which together produce a quite satisfactory result.

1) Energize.js - https://github.com/davidcalhoun/energize.js removes tap delay on all clicks/taps

2) In your jQM initiation add:

$.mobile.buttonMarkup.hoverDelay = 0;

3, 4 & 5) Use

$( "#YourPage" ).delegate("#YourButton", 'tap', function(event) {
        $.mobile.showPageLoadingMsg();
        $.mobile.changePage( "YourPage", { transition: "slide"} );                                               
        e.stopImmediatePropagation();
        return false;
        } );  

3) Instead of using a normal anchor link which jQM then converts to a mobile.changePage - Do that part yourself and (potentially) shave off a few ms

4) Delegate it to tap instead of click (although with energize.js present I can't tell any difference)

5) Show a loading message before you start transferring. If the the site you are navigating to is complicated it might take a while to generate, if you display a loading message, at least the user knows something is happening

6) Preload content using

$.mobile.loadPage( "YourPage" );

This might be a bit overkill due to overlap but hopefully using these techniques you'll be able to make your app a bit more responsive!

EDIT - Bonus: Here's a blog post which covers three other techniques for speeding up PhoneGap jQuery Mobile apps: http://therockncoder.blogspot.no/2012/06/three-quick-performance-tips-for.html

Answer 2

Only include the components you need when acquiring jquery mobile

http://jquerymobile.com/download-builder/