search

joehewitt / scrollability

Imitates iOS native scrolling in JavaScript.
http://joehewitt.github.com/scrollability
Other
1.78k stars 146 forks source link

Build some kind of preloading mecanism #16

Open mgcrea opened 13 years ago

mgcrea commented 13 years ago

Playing with a long list (500+) facebook friends list with pics & buttons on each li.

The scroll feeling is only perfect when i have first scrolled down entirely. Before that i have some rectangles that render a bit late. Maybe (with an option) it could be possible to "pre-load / pre-scroll the list", displaying some kind of opaque loading msg over it.

jasonwinn commented 13 years ago

Have you tried using -webkit-transform: translate3d(0,0,0); on your li elements?

joehewitt commented 13 years ago

I've tried that, didn't see a difference.

For really long lists, I think the only way we're going to get good performance is to create and destroy elements dynamically as you scroll, the way the Cocoa UITableView class works in iOS.

tilomitra commented 13 years ago

Do you mean remove and re-append to DOM? I don't think the DOM changes will be able to keep up with the scrolling speed. Is there a way to scroll through the list very quickly, thus putting all the elements in JS memory, to allow for good scrolling feel later?

mgcrea commented 13 years ago

About long lists & buffering, here is some interesting code from a sencha-touch Ext.List plugin addressing this specific point. Looks like it does indeed DOM manipulation.

http://www.sencha.com/forum/showthread.php?121225-High-Performance-Large-List-component-UxBufferedList https://github.com/Lioarlan/UxBufList-Sench-Touch-Extension/blob/master/UxBufList.js