how to speed up changepage in jquery mobile for phonegap app

Question

I am using jquerymobile 1.3.1 for my phonegap android app. The change page methord is slow (more than 1 sec) in android without page transition (defaultPageTransition=none).

Answer 1

There are few ways:

• In case you are using 1 html file with multiple pages, wrap them into single div:

  <div id="container"/>
  

  and set this css:

  body {
      margin: 0;
  }
  
  #container {
      position: absolute;
      width: 100%;
      height: 100%;
  }
  

  js code:

  $(document).one("mobileinit", function () {
      $.mobile.pageContainer = $('#container');
      $.mobile.defaultPageTransition = 'slide';
  });
  

  More about this aproach can be found here: http://outof.me/fixing-flickers-jumps-of-jquery-mobile-transitions-in-phonegap-apps/

• Other common solution is to set this css: .ui-page { -webkit-backface-visibility: hidden; }

The problem with that solution is that it breaks Select list on your forms.

• Turn them off:

  $(document).bind("mobileinit", function(){
      $.mobile.defaultDialogTransition = "none";
      $.mobile.defaultPageTransition = "none";
  });
  

• 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:

  <a class="ui-btn-left" data-icon="arrow-l" href="#" data-theme="a" id="back-btn">Back</a>
  
  $('#back-btn').bind('touchstart', function(e) {
      $.mobile.changePage("#pageID");
  });
  

  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.

Answer 2

I recommend

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

Just change in Jquery Mobiles's CSS

.in, .out {
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-duration: 350ms !important;
}