如何在 jquery mobile 中为 phonegap 应用程序加速 changepage答案

【问题标题】：how to speed up changepage in jquery mobile for phonegap app如何在 jquery mobile 中为 phonegap 应用程序加速 changepage
【发布时间】：2013-05-21 11:33:00
【问题描述】：

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

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

有什么想法吗？

【问题讨论】：

IMGO，再怎么努力也不会加快页面导航速度，也不会像html5那样流畅。

标签： cordova jquery-mobile

【解决方案1】：

有几种方法：

如果您使用 1 个包含多个页面的 html 文件，请将它们包装到单个 div 中：
```
<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 页面 { -webkit-backface-visibility：隐藏； }

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

关闭它们：

$(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 不应该像常见的 click/tap 事件那样有延迟。

我希望其中一些解决方案对您有所帮助。考虑到，这些不是万无一失的解决方案，它们也有自己的缺点。

【讨论】：

touchstart 和点击事件在下一页表单元素上触发.. :(
我的其他回答会帮你解决这个问题：stackoverflow.com/questions/14624621/…
我试过这个，没有页面转换就不行，但是可以用页面转换。

【解决方案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;
}

【讨论】：

这是唯一符合我要求的事情。我不知道是否有任何副作用，但马上，它是惊人的。