Airbnb Releases Infinity.js: A Javascript Library for Smoother Scrolling

http://airbnb.github.com/infinity/

by reissbaker • 14 years ago

198 95 14 years ago

airbnb.github.com

pokoleo• 14 years ago

...I don't think I understand the utility of this. Scrolling is already pretty smooth. (unless I'm wrong)

AlexCP• 14 years ago

It loads content as you scroll down the page.

SeckinJohn3• 14 years ago

As far as I can see, it also removes invisible "pages" of content(i.e. stuff you saw and you are about to see) from DOM to decrease the load on renderer

reissbaker6• 14 years ago

Author here. The utility is just to improve scroll smoothness (aka repaint times) of very-expensive-to-render pages, like infinite feeds with nice CSS effects. If you check out the demos linked to on the page, the demo with Infinity turned off should be noticeably choppier than the demo with it on, even once it's completely loaded and the browser's stopped reflowing. Probably depends on your machine/OS/browser combination -- but it'll keep loading more pugs as you scroll down, and eventually the version with Infinity off will grind just about anything to a halt.

recursive• 14 years ago

For me, in chrome on win7, the on and off demos both appear to be about equally choppy. I doubt I could identify a difference in a blind test.

snprbob86• 14 years ago

By repaint times, do you mean re-layout times? ie. time required for CSS/HTML/JS to determine where to paint to?

The demo is not any smoother on my 27" Apple display driven by a late 2010 model MacBook air. However, even low res hardware accelerated video renders choppy at large window sizes (although perf gets better when VLC or QuickTime is true fullscreen; presumably the compositor is off)

Faster JavaScript is unlikely to be effective at enhancing buffer flip times, which (for me) dominate repaint times.

godfreykfc• 14 years ago

I did something almost exactly the same[1] for a design project at school a while back, where I explained why current infinite scrolling UX is not great and how something like this could help[2]. I'm glad someone made this into a library!

[1] http://newcoursys.herokuapp.com/courses/2012sp-cmpt-165-c1/a... [2] http://newcoursys.herokuapp.com/#marking-interface

jasonkester• 14 years ago

Strange. It's the other way around for me (brand new Win7 box, Chrome, 16gb ram, fast everything, waited for all images to load before scrolling).

When I move the scrollbar on the "on" version, it flashes white and constantly drops images in and out until I let go or stop in one place. Then it whites out again next time I scroll. Quite distracting actually, like viewing the bottom part of a long page while it's still loading images.

The "off" version scrolls as one would expect, no flashes, no missing or reflowing content. Just like you'd expect.

PgUp/PgDown and arrow keys don't seem any different between the two.

Schlaefer• 14 years ago

The first paragraph is not tremendously helpful.

"UITableView for the web" … what does that mean? Why should a web dev know or care?

Make "demo" not "on" and "off" prominent. That's what I'm scanning the page for. Especially if you say "Infinity on and off" and it's the first time you use the word Infinity at all. Use Infinity or the symbol and then stick to it. At least introduce the name first.

SeckinJohn3• 14 years ago

If you try to move really fast with Infinity on, the screen turns completely white for a split second: http://airbnb.github.com/infinity/demo-on.html

reissbaker6• 14 years ago

True fact. That's just due to scrolling fast enough to get outside the buffer before the throttled scroll event fires -- if you want, you can turn the scroll throttle down to make sure that doesn't happen, at the expense of doing slightly more computation while scrolling. For Wish Lists, we optimize for people browsing through the feeds, which is generally not super fast. :)

SeckinJohn3• 14 years ago

yeah I experimented with NUM_BUFFER_PAGES and SCROLL_THROTTLE and I am sold :) thanks for building and releasing this!

hueyp2• 14 years ago

Its much faster for me as well.

In order to calculate the size of each ListItem you add it to the dom briefly when its appended to the ListView. This seems to be a fast operation since you do it hundreds of times yet the page is loading quickly. Is there a trick there that is avoiding having to calculate a ton of layout, or is that just not a big concern compared to other work the browser is doing?

Thanks!

humbyvaldes• 14 years ago

Cool! So basically it's a lazy load

losvedir• 14 years ago

Hm, it doesn't degrade very well without javascript on (pagination would be a neat fallback). I know it's not generally worthwhile to cater to such a limited user population, but what about search engines? Should this only be used for content you don't need indexed, or you have indexed a different way?

Or, since I think Google uses javascript in its crawlers, I wonder how it handles it. Presumably it would just keep scrolling until the content ran out or it gave up. But does it ever come back later? I know with pagination it could pick up on the links it left off on, but couldn't really do that here, right?

edit: I guess this is really a question of infinite scrolling more than this particular implementation. Kudos to Dropbox for releasing a well-done version of the technique.

frontendbeauty• 14 years ago

Awesome! This is going to help so much.

threepointone7• 14 years ago

OT - I can't help but mentally shorten code snippets with underscore/whatever. For example, I see this -

for(var index = 0, length = listItems.length; index < length; index++) { listItems[index].remove(); }

and I think to myself -

_(listItems).invoke('remove')

zaptheimpaler• 14 years ago

That's awesome! Is that from underscore.js?

threepointone7• 14 years ago

Yup. I love the philosophy underlying underscore. The functions are ridiculously simple, but so powerful to use once you grok it.

Kiro• 14 years ago

How does that work?

threepointone7• 14 years ago

http://underscorejs.org/#invoke

In simple terms, it goes through the array, and calls the named function on every element. You could read it as - "For this array, invoke the 'remove' function on every element."

thinkingisfun4• 14 years ago

that's funny, I'm the other way around.. whenever I see syntactic sugar implemented via javascript, I unroll it in my head and consider it overhead, compared to sending a bunch of more bytes down the wire which hardly matter after gzip.

thedz• 14 years ago

TIL javascript functions are syntactic sugar.

tomjakubowski• 14 years ago

Underscore uses native methods for map/reduce/forEach when possible. For a modern browser the performance difference is comparable, or even faster for a map than an unrolled for loop:

http://jsperf.com/native-for-loop-vs-array-foreach-and-array...

quarterto• 14 years ago

Or, in LiveScript:

    map (.remove!),list-items

ars• 14 years ago

Loading their demo linked from the word "on" froze my browser for about 20 seconds. Scrolling the page afterward was horrible, very jerky and laggy.

I have noscript installed, but all scripts on that page were allowed.

brokenparser• 14 years ago

+1, count me unimpressed.

Off:

    A script on this page may be busy, or it may have stopped responding. You can stop the script now, or you can continue to see if the script will complete.
    
    Script: https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js:4

On:

    A script on this page may be busy, or it may have stopped responding. You can stop the script now, or you can continue to see if the script will complete.

    Script: http://airbnb.github.com/infinity/infinity.js:154

Firefox 14.0.1 without NoScript, Linux 3.4.0.

gilini2• 14 years ago

Same here, but I wouldn't expect much from a jQuery plugin that implements "infinite scroll". Like I need stuff to start loading by itself whenever I reach the bottom of the page.

Also, looking at their code, the first thing I laid eyes on was this statement:

  var infinity = window.infinity = {};

Which, in this context, would be the exact same as

  var infinity = {};

brown9-22• 14 years ago

I believe they are doing that to override any functions/objects already bound to window.infinity from other plugins/scripts. Look at the infinity.noConflict() function at the bottom of the source, which seems to be inspired by the jQuery.noConflict().

dotborg• 14 years ago

why it's based on jQuery?

shmageggy• 14 years ago

Because re-inventing the wheel is soooo 20th century.

dotborg22• 14 years ago

what if I don't use jQuery in my project?

devgutt• 14 years ago

OP: Maybe you should change the links [on]/[off] to [demo on]/ [demo off].

lowglow• 14 years ago

I think Lue Links was doing this for several years. I'm glad to finally have a library for it.

tantalor2• 14 years ago

If this only works on jQuery objects, why not implement this as jQuery plugin?

  jQuery.fn.infinity = function (options) {...};
  $(el).infinity(options);

And so on.

lucian1900• 14 years ago

I think it might work with other methods of selecting DOM elements. At least that's what the API suggests.

tantalor2• 14 years ago

Maybe I'm not reading it right, but it says it depends on jQuery and accepts selectors or jQuery objects, not DOM elements.

gamzer• 14 years ago

Android 4.1.1 with or without Infinity: "The page has become unresponsive. Wait or kill?"

whirlycott1• 14 years ago

I tested infinite scrolling on a large site about a year ago and the results were decidedly negative in almost every significant respect according to our A/B testing. Does anybody actually have evidence that infinite scrolling is a good thing?

fuzzythinker2• 14 years ago

Just a data point, I find lightbox (photo sharing site, not js lib) to be so incredibly addictive that I spent 1/2 hour on it. There's no way I would have spent more than 5 mins had I have to click on each page.

andybak• 14 years ago

The most significant loss is the ability to keep your place. Google Reader is a good example. There's no way to bookmark how far back you've read so when I reload or close the tab I usually have give up and abandon unread items.

You could mitigate this but it would be useful to see what benefits people think infinite scrolling introduces and (if there are any) see if there is a solution that gives the same benefits with fewer costs.

Maybe some hybrid 'paged' infinite scrolling where you can keep going but clear pagebreaks are displayed which are mirrored in the browser history.

jqueryin• 14 years ago

I have actually recently implemented something just like this where I use a combination of infinite scroll, pagination, pushState, and history to maintain your page reference. It uses Ember.js, so it even updates the pagination count for you as you scroll through the table. The infinite scroll is toggleable and you can decide to just stick with the "prev/next" pagination items as well.

Unfortunately, I had to custom roll this solution. I started on a plugin but making it universally usable for a number of use-cases is a bit time consuming.

wsc981• 14 years ago

Personally I like infinite scrolling on a website like http://pr0gramm.com (warning: contains some explicit imagery, so NSFW)

I just check it out once every 2 or 3 days for a quick laugh and eventually I stumble upon some images I've already seen, which is when I close the site.

marknutter2• 14 years ago

HN likes to pretend that infinite scrolling has no utility, but it's simply not true. For sites where you want to quickly scan a lot of content, infinite scrolling is vastly superior to static pagination. For sites where you will typically consume every item in the list carefully and want to refer back to specific points in the list, pagination is vastly superior to infinite scrolling. They both have their benefits.

rplnt• 14 years ago

It's a good feature but it is often done so horribly it becomes not liked. Rule number one: If you use infinite scrolling instead of pages, don't remove pages. Especially on pages where content is somehow ordered (shops, lists, ..).

zzzmarcus• 14 years ago

Pinterest seems like the best example. I don't have any numbers but explosive growth and fanatical users seem to be good circumstantial evidence for infinite scrolling. Prismatic also uses it and personally I love it on that site.

debacle• 14 years ago

http://pornterest.net

_lj• 14 years ago

You've obviously never tried to surf porn in tumblr. It's much easier for accounts with infinite scrolling on vs those that use pagination. :)

jazzychad• 14 years ago

Thank you for using sane js code style.

yason• 14 years ago

I tried both off and on demos, and all I got was a huge page loading slowly with scrolling causing flickering and stuttering. This is on Linux/Chrome. Maybe people shouldn't try to create large, image heavy pages in the first place, not to mention make them infinitely long.

notatoad• 14 years ago

Yeah, Mac/FireFox here and the same experience. both the on and off demos gave me a spinning beach ball for a minute while what seemed like the entirety of the content loaded. I thought that's what infinite scrolling was supposed to prevent?

shocks• 14 years ago

Both demos are the same for me. Chrome, Windows 7 64bit.

weixiyen• 14 years ago

UITableView was made for mobile devices not for infinite scrolling per se, but simply for large lists (such as address books) due to the memory limitations of iOS devices.

Those memory limitations are simply nonexistent for the web for almost all but the smallest number of cases (ie, infinite lists).

But lets pretend that this infinite scrolling is even a real problem (honestly it's probably not the best UI for large infinite lists of things on the web).

The current implementation clearly needs some work. It's trying to over-optimize for memory to the point of choking the scrolling.

This, however, can be fixed fairly trivially.

Allow the user to scroll anywhere (even past loaded content). If you can't eagerload elements to compensate for it, then lazyload after the user gets to that point. This gives users the illusion that the scrolling is truly smooth and responsive. The important thing is never allow scrolling to stop unless it's truly at a dead end and there is absolutely no more elements to load.

The above is how UITableView functions. Infinity.js is UITableView for loading elements, but does not function anything like UITableView from a user interaction standpoint.

89a• 14 years ago

off version actually worked better for me

crag• 14 years ago

We (at our company) don't use pagination anywhere now. But we do have extensive search abilities. We have found, very few of our users just scroll. They use the search. But the "infinite" scrolling is there if they want it.

bicknergseng2• 14 years ago

Note to all developers planning on implementing infinite scrolling:

Don't have a footer. Example of this error: LinkedIn. Try to get to their ToS or Help Center from the logged in home page. Good luck.

fuzzythinker2• 14 years ago

It can, it just needs to be position as fixed.

bicknergseng2• 14 years ago

I stand corrected. I personally like what Facebook now does (they used to have the same problem). They put the same information in a tile at the bottom of their right pane, which is fixed.

Airbnb Releases Infinity.js: A Javascript Library for Smoother Scrolling

Related Stories