Book Image

Building Single-page Web Apps with Meteor

By : Fabian Vogelsteller
Book Image

Building Single-page Web Apps with Meteor

By: Fabian Vogelsteller

Overview of this book

Table of Contents (21 chapters)
Building Single-page Web Apps with Meteor
About the Author
About the Reviewers

Lazy loading posts

Now that we've gone through these simple examples, let's put them all together and add a nice lazy load feature to our posts' list on the front page.

Lazy loading is a technique that loads additional data only when the user desires it or when they scroll to the end. This can be used to increase page load, since the data to be loaded is limited. To do this, let's perform the following steps:

  1. We need to add a lazy load button to the bottom of the list of posts on the front page. We go to our home.html file and add the following button at the end of our home template, right below the {{#each postsList}} block helper:

    <button class="lazyload">Load more</button>
  2. Next, we will add the publication that will send a flexible number of posts to our publications.js file, as follows:

    Meteor.publish('lazyload-posts', function (limit) {
      return Posts.find({}, {
        limit: limit,
        fields: {
          text: 0
        sort: {timeCreated: -1}

Basically, it's a combination...