How to implement lazy load on large list with links

[semiloore]

I am new to onsen ui but I found it interesting to learn although I don’t know much javascript. I am making a book app that will display some text in each page. I also started with TODO App. My app has a little above 1000 pages in which a made list items to link to each of the pages. Each of the list item has the Title that link to each page. ` I successfully added navigation and 1000 lists to one of the tab page, and a back button to each page. The problem I have is that the whenever I clicked on the tab that has the list item, it is very SLOW. If I click back button from any of the pages in order to go back to the list items, it is also very slow. When I checked the documentation I found ‘ons-lazy-repeat’ but I don’t know how to implement it on my list item. Please any help with examples will be highly appreciated. Thank you. This is my code

<ons-list>
  <ons-list-item tappable modifier="longdivider chevron" onclick="myNavigator.pushPage('page1.html');">Title of page 1</ons-list-item> 
  <ons-list-item tappable modifier="longdivider chevron" onclick="myNavigator.pushPage('page1000.html');">Title of page 1000</ons-list-item>
</ons-list>

[Fran Diox]

@semiloore Hi! There is a lazy repeat tutorial here.

And here’s a new example more similar to your specific issue: https://codepen.io/frankdiox/pen/PmaGXB?editors=1010

[semiloore]

Thank you for your reply. I am still not able to figure it out. My question is that how can I make the page tittle to be different. In my case, the items is not just page 1 … page 1000, but a unique title in the book for example:
1 Introduction
2 Great name for you
3 You can achieve your goal
…
1000 Beyond the sky
Moreover, each title link to its unique page. Any help is highly appreciated.
Thanking you in anticipation.

[Fran Diox]

@semiloore I explained the Onsen UI side since I thought you had difficulties there. The issue looks more related to programming, though. Load your information in an array, for example, with all the pages information in objects:

var pagesInfo = [
  { 
     title: 'Page 0 title',
     content: 'Lorem ipsum dolor'
  },
  { 
     title: 'Page 1 title',
     content: 'Lorem ipsum dolor'
  },
  { 
     title: 'Page 2 title',
     content: 'Lorem ipsum dolor'
  },
  { 
     title: 'Page 3 title',
     content: 'Lorem ipsum dolor'
  },
  ...
]

You can use the index that LazyRepeat gives you to access the information in that array. If you don’t want to use the same template for every page, you can also store the template URL of each page in those objects.

Hope it helps!

[semiloore]

Thank. Can you please provide a code pen example for a better understading.

[munsterlander]

@semiloore It seems like several people were asking for something like this. I wrote this today for another user. https://codepen.io/munsterlander/pen/Emepam

As many of you know, I am not found of JS frameworks at all, so this is entirely vanilla:

window.fn = {};

fn.getJSON = function(url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.responseType = 'json';
    xhr.onload = function() {
      var status = xhr.status;
      if (status == 200) {
        callback(null, xhr.response);
      } else {
        callback(status);
      }
    };
    xhr.send();
};

fn.loadData = function (data){
  var dataKeys = Object.keys(data);  
  var infiniteList = document.getElementById('infinite-list');

    infiniteList.delegate = {
      createItemContent: function(i) {
        return ons._util.createElement(
          '<ons-list-item>' + data[dataKeys[i]].case_desc + '<br />'+ data[dataKeys[i]].case_img +'</ons-list-item>'
        );
      },
      countItems: function() {
        return Object.keys(data).length;
      }
    };

    infiniteList.refresh();
}

ons.ready(function() {
  fn.getJSON('https://abcd-8afa3.firebaseio.com/main_feed.json',
  function(err, data) {
    if (err != null) {
      console.log('Something went wrong: ' + err);
    } else {
      fn.loadData(data);
    }
  });
}); 
  

Edit: Removed the size function as @Fran-Diox pointed out that Objects.Keys returns an associative array where you can use the length property.

[misterjunio]

Thank you so much @munsterlander. I took the liberty of reusing your work and adapting slighly for AngularJS at another user’s request. The result is in this pen.

[munsterlander]

@misterjunio Great work!