Sneak Peeking 1.2.2: Lazy Repeat (or Infinite Scrolling)

Image for post
Image for post

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

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.

The Web Tub

Pushing the web current through hybrid mobile and PWA…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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