如何加速changepage在jQuery移动手机的phonegap应用程序 [英] how to speed up changepage in jquery mobile for phonegap app

问题描述

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

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).

touchstart和点击事件触发下一页表单元素。 。

touchstart and tap events are firing on next page form elements..

任何IDEA？

推荐答案

有几种方法：

• 如果您正在使用多个页面的1个html文件，请将其封装为单个div：

• In case you are using 1 html file with multiple pages, wrap them into single 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';
});

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

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

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

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

使用jquery mobile apps上的quickclick加速点击事件，点击事件最多可以累计300毫秒到页面转换。

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.

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

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

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

touchstart（或touchend）事件非常好，如果你知道用户不会滚动。这实际上是点击事件在移动设备上解决这么长时间的原因，设备正在等待用户是否滚动或点击。所以touchstart不应该有像普通点击/点击事件一样的延迟。

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.

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

这篇关于如何加速changepage在jQuery移动手机的phonegap应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！