在 jQuery Mobile 1.1 中为使用 PhoneGap 构建的 iPhone 应用程序加速页面转换? [英] Speeding up page transitions in jQuery Mobile 1.1 for iPhone apps built with PhoneGap?

问题描述

JQM 1.1 中的页面转换在 iPhone 上仍然会导致 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 中的页面转换感觉更原生?我们知道有像 Zepto 这样的替代框架，但如果可能，我们更喜欢使用 JQM.

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 - 自己做这部分并(可能)减少几毫秒

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 Mobile 应用程序的其他三种技术: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

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