

Techniques for smooth infinite scrolling in HTML5 - datadiver
http://engineering.linkedin.com/linkedin-ipad-5-techniques-smooth-infinite-scrolling-html5

======
brianbreslin
I get super frustrated by infinite scrolling when the site designer adds to
the footer of the site menu options that aren't in the header menu. So you can
NEVER click on the footer links that you so desperately need. Also wish you
could kill infinite scroll w/a click or keyboard command.

~~~
datadiver
true, infinite scrolling and footer do not work together, unless footer is
position:fixed, which is often the case on mobile. Infinite scrolling is
pretty much the norm on mobile and is increasingly popular on desktop,
pinterest and twitter are examples.

I have found only a couple of libraries that attempt some of the techniques
used by LinkedIn team. One is
[infinity.js](<http://airbnb.github.io/infinity/>) by airbnb but it is
specific to pinterest-style masonry layouts, and another is
[swipeview.js](<http://cubiq.org/swipeview>) by Matteo Spinelli, the great guy
who created iscroll.js. We are using swipeview in
[Urbini](<http://github.com/urbien/urbini>) but it is not good enough,
scrolling is terribly slow. It is possible that it is some problem in
interaction between jquery mobile and swipeview, so we are investigating it,
but anyway swipeview is not even close to what LinkedIn guys have created. I
know Sencha guys have a similar technique, [Infinite List
Component](www.sencha.com/blog/the-making-of-fastbook-an-html5-love-story) but
we do not want to use Sencha as it has terrible cross-browser support compared
to JQM.

~~~
trunalb
SwipeView is pretty good but not good enough for large scale front end
application. Also, SwipeView (at the time when I looked at it) required all of
the data upfront v/s letting the app pull it via a webservice. If you're
looking for more info on how LinkedIn achieved the buttery performance, you
might want to look into <http://www.youtube.com/watch?v=ft9R72R7TlI>

~~~
datadiver
thx @trunalb, good find, will check out the video later (man, it is an hour
long). I pretty much understand all LinkedIn techniques. Just lack the time to
implement them and support this code for various environments. Ideally this is
what JQM team should have provided as a replacement for their barebones and
very tricky to use listview widget. Good scrolling/swiping performance is
impossible on mobile without managing a sliding window in DOM, like good old
editors used to do with files that did not fit into memory.

~~~
trunalb
cool @datadiver. LMK if you need any help. FWIW, I implemented the infinite
scrolling when I was at LinkedIn ;)

~~~
datadiver
omg, you did? I see that you used the sliding window with 3 parts. The closest
pages are left as is. Then next set use the technique #1 unloading images.
Then the next set of pages use technique #2 hiding pages, while the rest of
the pages use technique #3 removing pages. Why not just use #3? Is there a
speed advantage to still having around the pages with the fake image and the
pages with visibility hidden?

~~~
trunalb
Yup there is. It also takes care of the use cases if the user swipes forwards
and then back again quickly.

