Power By 专否社区

Speed up dialog/page transitions in jQuery Mobile on iPhone?

Go To StackoverFlow.com

2

There are other SO questions on speeding up jQuery Mobile for Android, but does anyone know how to accelerate page transitions on iPhones, specifically dialog transitions?

We're on JQM 1.0. JQM 1.1 is supposed to speed up page transitions (though we haven't seen any demos yet), but we're wondering if anyone has done anything for JQM 1.0.

Right now, there is a two second delay, which is too much to show a dialog. We resort to one of two options. Using no animation for the page transition, which provides instant feedback, or rolling our own by binding to "touchstart" and animating the dialog, which is really just a big DIV inside the current page.

Neither is ideal.

Suggestions?

2012-04-04 22:07
by Crashalot
The link on jquerymobile.com to the documentation by default has taken you to the docs for 1.1.0 RC-1 since it came out about a month ago. So if you look at the docs on a mobile device you'll see what changes have been made in 1.1.0 RC-1: http://jquerymobile.com/demos/1.1.0-rc.1/. Also, what version of the iPhone are you testing on and what version of iOS does it have - Jasper 2012-04-04 23:19
ios 4.3.x, iphone 4 ... is the delay removed completely in 1.1? i saw elsewhere that the page transitions are pretty slow still - Crashalot 2012-04-04 23:44

0

You should probably start by updating to 1.1 with a copy of the app. JQM 1.1 uses HTML5 transitions much more widely. In our webapps, this has substantially improved the performance of transitions.

If you want to simulate this in 1.0, create the transitions using webkit's CSS transform and animate properties with two classes ".active" and ".hidden", and then bind the addClass() function to a touchStart event in JQM.

2012-04-04 23:28
by Wandering Digital
Is there a noticeable lag on page transitions now? When we use no page transition, there is no delay in switching pages, but there is a painful lag when using page transitions? Also, did you have any huge issues upgrading to 1.1 - Crashalot 2012-04-04 23:45
@Crashalot I've messed around with every version of jQuery Mobile since 1.0a3 and I didn't experience any issues going from 1.0 to 1.1.0 RC-1. That certainly doesn't mean there aren't any but I use most of the widgets and haven't had any issues yet - Jasper 2012-04-05 00:01
cool, maybe we'll try porting soon. how about page transitions in 1.1? are they as fast now to the end user as not using any page transitions - Crashalot 2012-04-05 00:03

0

The "click" delay is part of the android webkit I think, not much you can do about it. You could bind the touchstart events to the buttons and then call the .changePage of JQM.

No need to roll your own animations, JQM will manage that!

2012-04-04 23:24
by bartolsthoorn
iOS creates the delay as well. But the delay created by the browser for the click event should only be like half a second (it's to detect if the user is clicking or swiping) - Jasper 2012-04-04 23:53
Yes it's to detect that, but some reports say the delay is longer than required: http://forum.jquery.com/topic/usability-touch-feedback-too-slow Well, I'm gonna test this - bartolsthoorn 2012-04-05 09:56
Ads