jQuery Forum

You might want to give my new iScroll widget a try:

https://github.com/watusi/iscrollview

Though I doubt it will fix your issue. It will make your life easier, and it's able to initialize iScroll earlier in the page creation process than other methods I have seen. (i.e. the initialization is done before the page is ever shown, thanks to the required jquery.actual plugin.)

Most of the speed issues I have seen come AFTER the scroller is loaded.

There's this issue:

http://forum.jquery.com/topic/why-jqm-touchscreen-list-scrolling-performance-stinks-and-what-to-do-about-it

But it's not specific to iScroll. You will get this any time you have a long list of anchors. (Lists without anchors are fine.)

Then there is an (iScroll-specific) issue with off-screen list items not being initially cached. The symptom is sluggish scrolling until you've reached the bottom of the list the first time. This can be fixed with some CSS:

1. /* Force list items to be cached
2.    See: cubiq.org/you-shall-not-flicker */
3. 
   
4. ul.ui-listview li {
5.   -webkit-transition-duration: 0;
6.   -webkit-transform: translate3d(0,0,0);
7. }

However, this may make your initialization even slower, as it applies this to every item in the list.

The mobile web app that I built has a list on the Forum page where each list item is a forum thread.  There were some 500+ threads already, and loading them all at once seemed to really drag down performance.  My solution for this was to only load the first 30 threads, and then lazy load 30 more when the user scrolls to the bottom of the page/clicks the button.  It turned out pretty nice!

I'm not using iScroll, but will just report on list performance challenges that I've experienced in my app.  One of my lists was almost 200 items in length and was pretty slow to load/render.  My performance issue was worsened after I added count bubbles which are kind of expensive to tally up (in my case it is anyway).  So, I finally hunkered down and implemented lazy loading using JSON.  The performance improvement is pretty dramatic.  I improved it to the point where even with the count bubbles, the list is loading and rendering much faster than it use to.  The lazy loading presented some other challenges that I won't go into, but I think I've gotten those all worked out.            

iScroll does not support lazy-loading out of the box. But you should be able to implement it without modifying the source, since it triggers events on scrollstart//beforescrollmove/scrollmove/beforescrollend/scrollend.

My iscroll widget for JQuery Mobile exposes these as JQuery events, so you can use .bind(), .delegate(), .on(), etc. on them.

@watusiware, in that case it might be pretty easy to get it to lazy load.  Sorry if this is a dumb question...but I know nothing about iScroll or your widget.  Does your iScroll widget for JQM only work on iOS or does it work the same way across all platforms?   

Sorry if this is a dumb question...but I know nothing about iScroll or your widget.  Does your iScroll widget for JQM only work on iOS or does it work the same way across all platforms? 

iScroll is cross-platform, and does not require JQuery or JQuery Mobile. It is very good at adapting to the nuances of different platforms.

My jquery.mobile.iscrollview widget is a wrapper around iScroll for JQuery Mobile. It is also cross-platform. It takes care of the messy details of initialization and page modification for you, and conforms to JQuery Widget Factory conventions - for example allowing you to do standard JQuery binding to scroller events, make calls to iscroll methods in the same way that you call other widget methods, etc. So, it makes iscroll a much better fit for JQuery Mobile than just using iscroll on it's own.

 In the simplest case, you need only include the required JS files in your header and add a single data-iscroll attribute to the wrapper of the element you want to scroll.

Sounds cool.  I might have to try it out just to see if it improves the jumpy and blinky transitions on android.  

Hi i tried to use iscroll with iscrollview to have a list scroll fluid. All plugin work fine exept for one thing. as cited at the start JQM havee problems with transitions in a long list, i tried all version 1.0 and 1.1, same problem.transitions are good for the first items but over the twenty item transitions are very slow.

when I read this sentence "(Lists without anchors are fine.)" i hope and i tried to use div in <ul data-rule="listview"> without anchor, the transitions starts with $.mobile.changePage( "#dynamic", { transition: "slide"} ) but also this solution not good. So i think: is there a solution?

I tried all way but nothing and i not find discussion on the web. Can you help me?

Thanks for help.

Can you clarify whether you are seeing long transitions on transitions from or to a page with a long list?

If "from", then this might be caused by a bug in jQuery Mobile 1.1. A pretty good indicator that the bug is at fault is if the transition takes longer the further down in the list the link that was tapped is.

But it doesn't make sense if it also happens with jQuery Mobile 1.0, because I don't think it has this bug.

Does this occur still if you don't use iScroll?

If "to", then you can turn on some debugging features in jquery.mobile.iscrollview to help characterize it. Set the debug and traceCreateDestroy options to true, and you will get timing for create and destroy of the iscrollview widget on the console. (For embedded UiView, solutions for viewing the console output like jsconsole.com are useful.)

To a page. I have the home page that is create with an ajax request, this request create a list in ul data-role=listview of ten items. initially the transitions are good but every time that  i append (with pull to refresh) other items the waitng for transition beetwen pages increases. after 3 ajax request (list of 40 items) the transitions between #page1 and #page2 are very very long 10/15 sec.

If i don't use iscroll there is a basicaly problem of jQM, if i click on an item the list scrollto top then i have the transitions but all very quickly.

You understand that not is good have a long list that scrollto top every time a user click on an item.

Sorry for my english i know that is very bad.

Thanks for help I hope there is a solution because my app is complete but this bug stop me.

If you want i can post my html/php/ scheme.

I'm still unclear as to which page is which.

You have some page that initially has a few items, and you add items to it using pull-to-refresh.

You switch away from that page to another page, (?) and then when you go back to your dynamic page, it is a slow transition. Do I have that right?

I'd be interested in seeing what the dynamic items look like, along with any CSS that is applied to them.

It is best to avoid complication in lists. Don't use background images or gradients. Don't use text shadows. Don't use rounded corners. All of these things can be very computationally expensive on certain platforms.

How does the demo perform on your device? If you run the demo, and use pull-to-refresh to add items on the "Pull" page of the demo, how is performance as items are added? (You will need to modify the Pull page to add data-dom-cache="true" to the page div so that you can go to another page and go back with the added items still there.)

You have some page that initially has a few items, and you add items to it using pull-to-refresh.

You switch away from that page to another page, (?) and then when you go back to your dynamic page, it is a slow transition. Do I have that right?

Exactly, so there are very strange thing.

1) the transitions are slow from #home to  #dynamic and from #dynamic to #home.practically always.

2) My list start with 10 items and in this moment all transition are ok. Every time that i add (with pull to refresh) items i add other 10 items. Every time that i add items the transition time increases (10 sec. too)

I try to change in iscroll.js "checkDOMChanges=false" to "checkDOMChanges=true" but nothing.

It is best to avoid complication in lists. Don't use background images or gradients. Don't use text shadows. Don't use rounded corners. All of these things can be very computationally expensive on certain platforms

Impossible, beacause i have create an app for my blog and there are image.However i tried with a very long list but not from my server, i wrote 40 items directly in the <ul> but the issue is the same. Then i don't use particular css i use the basic css of JQM i can try but don't think that is the problem.

Thanks for help.