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 in JQM 1.1 feel more native? We know there are alternative frameworks like Zepto, but we prefer using JQM if possible.

We're using PhoneGap to distribute the app on iOS devices.

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