Efficiently showing large list in HTML [closed]

Answer 1

It's a technique called "infinite scroll", and multiple libraries support it. If you're using jQuery, take a look at:

http://www.infinite-scroll.com/

As you know, the idea is to determine "how much" of the dataset the user can current see, and then perform a request for only that much, but set the scroll in relation to the size of the entire set. That way, once the user scrolls past a certain point, you can request for the next part of the dataset.

ExtJS also has this as part of their component-based framework. Here's a grid example.

Answer 2

This post covers your question and presents answers - http://engineering.linkedin.com/linkedin-ipad-5-techniques-smooth-infinite-scrolling-html5

Isn't the killer plugin you're after but goes a long way to explaining how you would go about creating it yourself.

UPDATE: There's a new library called infinity.js, more info here - https://stackoverflow.com/a/12108015/921259

Answer 3

It's true that you will have performance cost when scrolling a large list. Even if you set display:none; or visibility:hidden; to every element that was not visible on the viewport, you will have some lag because every element still being recalculated when you scrolling the list.

To avoid the recalculation, every element should be moved to Virtual DOM so it will never being rendered and some property (like height/width) will default to 0.

There are some library that can handle the virtual scroll like Clusterize, ngx-ui-scroll, hyperlist, etc.

But some of them doesn't support dynamic row height, some of them aren't MIT licensed, and some of them have a little feature for manipulating the content list. So I decided to build a MVW library that can handle dynamic row height like this example. And yes, it's able to use scrollTo(index) for automatically scroll to the selected index.

The implementation is just like

<div sf-controller="large-list">
  <ul class="sf-virtual-scroll">

    <li sf-repeat-this="x in list">
      {{x.id}}
    </li>

  </ul>
</div>

sf.model.for('large-list', function(self){
  self.list = [];

  for(var i = 0; i < 1000; i++){
    self.list.push({id:i});
  }
});

You could manipulate the displayed list with the default array function like push, splice, pop.

Or try it here

Answer 4

Have you tried the overflow attribute in css? Just give your container div a standard width and height like so:

#container { height: 500px; width: 500px; overflow: auto;}

Answer 5

I ran into a similar problem. The scenario was that I already had a large (~400+ elements) to be displayed in a list, where each element can have it's own view. The creation, layout and painting of the DOM for those elements was slower than I needed when tryign to render the entire list inside a scrolling DIV.

I looked at several solutions.

InfinityJS [1] was pretty close to what I wanted except it required that the element containing the list items already be added to the DOM.

infinite-scroll [2] by Paul Irish was also interesting, but was solving a specific problem that was different from what I needed to solve.

MegaList [3] came closest to what I wanted. Andrew (author) has done a great job of designing it for mobile first, with touch support etc. One caveat for me was that it appears to assume a strict selection list model and does a little bit more than I'd like a list component to do (e.g. binding to resize events and trying to handle that automatically).

So I started writing a barebones list component losely modeled after the iOS UITableView -- and called is the js-virtual-list-view (vlv :-). It's a work in progress and I wouldn't recommend it over the above unless you have similar needs that aren't quite met with those.

Sources are here https://github.com/shyam-habarakada/js-virtual-list-view.

Contributors needed :-)

[1] http://airbnb.github.io/infinity/

[2] http://www.infinite-scroll.com/

[3] https://github.com/triceam/MegaList

Answer 6

Consider Clusterize.js

This plugin does exactly what you ask.