如何加快在jQuery手机换phonepage changepage页面

Question

我使用jquerymobile 1.3.1为我phonegap android应用程序。在没有页面转换的情况下，更改页面方法很慢（超过1秒）（defaultPageTransition = none）。

touchstart和自来水事件射击下页的表单元素..

什么想法？

Answer 1

我建议

Energize.js - https://github.com/davidcalhoun/energize.js删除上的所有点击分头延迟/水龙头

jQuery的手机的CSS只要改变

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

Answer 2

有几个方法：

• 如果您在多个页面中使用1个HTML文件，请将它们包装进入单格：

  <div id="container"/> 
  

  ，并设置这个CSS：

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

  JS代码：

  $(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的移动应用使用fastclick加快单击事件从而加速页面过渡。点击事件最多可以在页面转换中加入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不应该像普通的点击/点击事件那样有延迟。

  我希望有这样的解决方案将帮助你。考虑到，这些都不是防弹的解决方案，他们有缺点的，他们自己的。