5

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.

1
  • 1
    Ultimately, we couldn't disguise the slowness of JQM. We ripped it out and built basic page transitions ourselves.
    – Crashalot
    Oct 21, 2012 at 20:38

2 Answers 2

13

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

4
  • This is awesome, thanks. We'll try some of this, though our needs are simpler since the app uses a multi-page template.
    – Crashalot
    Jun 14, 2012 at 7:29
  • Energize.js is awesome, just what I needed.!
    – Philip
    Aug 17, 2013 at 8:30
  • @MichDart A word of caution when using energize.js with jQM: Tap events can in some cases be triggered twice as jQM also handles tap-events. If you notice some strange behaviour, try changing the way the event is triggered (e.g. use jQM to bind a function to the tap of the element in question rather than using a href)
    – Hessius
    Aug 23, 2013 at 9:21
  • I'll probably be updating this with a new method soon-ish, check back if you enjoyed these :)
    – Hessius
    Aug 29, 2013 at 21:09
0

Only include the components you need when acquiring jquery mobile

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

1
  • Still in alpha, per the website: "Please note that the jQuery Mobile Download Builder is still in alpha, and as such should not be used on production websites."
    – Crashalot
    Aug 17, 2013 at 9:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.