如何加快jquery mobile for phonegap应用程序的更改页面

Question

我正在使用jquerymobile 1.3.1为我的phonegap安卓应用。没有页面转换的android中的更改页面方法很慢（超过1秒）（defaultPageTransition = none）。

touchstart和tap事件在下一页表单元素上触发..

任何IDEA？

Answer 1

有几种方法：

• 如果您使用包含多个页面的1个html文件，请将它们包装成单个div：

  <div id="container"/>
  

  并设置此css：

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

  js code：

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

  有关此方法的更多信息，请访问：http://outof.me/fixing-flickers-jumps-of-jquery-mobile-transitions-in-phonegap-apps/

• 其他常见解决方案是设置此css：     .ui-page {         -webkit-backface-visibility：hidden;      }

该解决方案的问题在于它打破了表单上的选择列表。

• 关闭它们：

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

• 在jquery移动应用上使用快速点击可加快点击事件，从而加快页面转换速度。点击事件可以在页面转换中添加最多300毫秒。这个插件会做得更多，但在你的情况下就足够了。

链接：https://github.com/drowne/jquery.mobile.fastclick

• 如果您不想要其他插件，您仍然可以通过从页面更改按钮中删除href然后执行此操作来实现更快的页面转换：

  <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");
  });
  

  如果您知道用户不会滚动，则touchstart（或touchend）事件会很有效。这实际上是点击事件在移动设备上需要很长时间才能解决的原因，设备正在等待用户是否正在滚动或点击。所以touchstart不应该像常见的点击/点击事件那样有延迟。

  我希望其中一些解决方案可以帮助您。考虑到这些并不是防弹解决方案，而且它们有自己的缺点。

Answer 2

我推荐

Energize.js - https://github.com/davidcalhoun/energize.js消除了所有点击/点击的点击延迟

改变Jquery Mobiles的CSS

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