在使用PhoneGap构建的iPhone应用程序中，加快jQuery Mobile 1.1中的页面过渡？ [英] Speeding up page transitions in jQuery Mobile 1.1 for iPhone apps built with PhoneGap?

问题描述

JQM 1.1中的页面转换仍然会对iPhones造成1-2秒的延迟，从而影响用户体验。

Page transitions in JQM 1.1 still incur a 1-2 second delay on iPhones, which compromises the user experience.

有人知道如何使页面转换在JQM 1.1感觉更加原生？

Has anyone figured out how to make the page transitions in JQM 1.1 feel more native? We know there are alternative frameworks like Zepto, but we prefer using JQM if possible.

我们使用PhoneGap在iOS设备上分发应用程序。

We're using PhoneGap to distribute the app on iOS devices.

推荐答案

我使用了几种方法，共同产生了相当令人满意的结果。

I use a couple of methods which together produce a quite satisfactory result.

1 ）Energize.js - https://github.com/davidcalhoun/energize.js 删除所有点击/点击的点按延迟

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

2）在您的jQM发起中添加：

2) In your jQM initiation add:

$.mobile.buttonMarkup.hoverDelay = 0;

3，4& 5）使用

3, 4 & 5) Use

$( "#YourPage" ).delegate("#YourButton", 'tap', function(event) {
        $.mobile.showPageLoadingMsg();
        $.mobile.changePage( "YourPage", { transition: "slide"} );                                               
        e.stopImmediatePropagation();
        return false;
        } );  

3）而不是使用正常的锚链接jQM然后转换为mobile.changePage - 部分自己和（可能）刮掉几个ms

3) Instead of using a normal anchor link which jQM then converts to a mobile.changePage - Do that part yourself and (potentially) shave off a few ms

4）委托它来点击而不是点击（虽然使用energize.js礼物我不能告诉任何区别）

4) Delegate it to tap instead of click (although with energize.js present I can't tell any difference)

5）在开始传输之前显示加载消息。如果您正在导航的网站很复杂，可能需要一段时间才能生成，如果您显示加载消息，至少用户知道发生了什么。

5) Show a loading message before you start transferring. If the the site you are navigating to is complicated it might take a while to generate, if you display a loading message, at least the user knows something is happening

6）使用

$.mobile.loadPage( "YourPage" );

这可能有点过分，由于重叠，但希望使用这些技术，你将能够你的应用程序有点响应！

This might be a bit overkill due to overlap but hopefully using these techniques you'll be able to make your app a bit more responsive!

编辑 - 奖励：这是一篇博客文章，涵盖了加快PhoneGap jQuery移动应用程序的其他三种技术：http://therockncoder.blogspot.no/2012/06/three-quick-performance-tips-for.html

EDIT - Bonus: Here's a blog post which covers three other techniques for speeding up PhoneGap jQuery Mobile apps: http://therockncoder.blogspot.no/2012/06/three-quick-performance-tips-for.html

这篇关于在使用PhoneGap构建的iPhone应用程序中，加快jQuery Mobile 1.1中的页面过渡？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！