The Web Tub
Published in

The Web Tub

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 on February 15, 2015.




Pushing the web current through hybrid mobile and PWA technology. Presented by the Monaca and Onsen UI team.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Onsen UI & Monaca Team

Onsen UI & Monaca Team

Team of developers from Onsen UI and Monaca

More from Medium

Bootstrap your micro front-end in 5 minutes

Generate Webpack module federated micro front-end app using create-mfa-app CLI

5 best front-end framework to look out

Tooltip on disabled options in Material UI Autocomplete