Sneak Peeking 1.2.2: Lazy Repeat (or Infinite Scrolling)

One of the features that the upcoming release of OnsenUI provides is the ons-lazy-repeat component. Frequently we need to load lists of elements that are large enough to slow down the app or even freeze it until the loading is finished, worsening the user experience. Here is where the new ons-lazy-repeat comes in.

ons-lazy-repeat will consider the item heights in order to display enough elements on the screen but wait to load the rest of them, thus improving the loading times and the user experience while avoiding possible problems for slower devices or connections. Further, at the same time it loads new elements that come into view, ons-lazy-repeat will also unload items when they are not visible anymore. With this approach, a list with millions of items can be rendered without a drop in performance.

This feature becomes quite handy for many use cases, such as navigating through a list of items with a lot of images or animations. Let’s see now an example application using ons-lazy-repeat. This app generates 10 million (10,000,000) random items with images and text:

How to use lazy-repeat

We need a delegate object that will held all the required information for ons-lazy-repeat. Notice that most of the functions receive an index parameter that contains the order of the item in the list. Here is our delegate object:

In detail:

  • calculateItemHeight(index) should return the height of an item, either static as in this example or dynamically.
  • countItems() returns the total length of the list we want to display.
  • destroyItemScope(index, childScope) is an optional method that will be triggered everytime an item is unloaded, so we can handle any related functionality.
  • configureItemScope(index, childScope) contains the information about the items themselves, which can be dynamically created or loaded from a preset array of items:

In this example we define every item as an object containing four different attributes, and one of them, item.desc, will be asynchronously loaded from an HTTP request when ons-lazy-repeat sees fit. In real apps you’d normally want to pre-fetch a bunch of items instead of getting them one by one, but for the sake of simplicity in this example we just make a request per item.

In the HTML, we just need add ons-lazy-repeat to our traditional tags, such as <ons-list-item>, specifying the delegate previously created:

Remember that MyDelegate object must be attached to the scope of the same controller as the <ons-list-item> element is in. Also notice that this is a genereal attribute, which means that it is not limited to <ons-list>, but works with any tag where we can figure out the height of the items, such as <div> tags.

That’s all about the new ons-lazy-repeat feature, surely you will find original ways to use it. You can check the code of this project on Github and leave any question or feedback in the comments. Stay tuned for the next update!


Originally published at onsen.io on February 15, 2015.