CODEWITHSUNDEEP
javascriptmeteorinfinite-scroll
Vladimir Lebedev
Vladimir Lebedev

Reputation: 1237

How to implement infinite scroll in meteor?

I have a large collection of image thumbnails stored in mongodb which I would like to render on a client using infinite scroll technique: show the first batch of images (i.e. 4 rows of them) and when user scrolls down to the last row in the batch, send a new batch of content to the client.

Is it possible to implement this using meteor?

Upvotes: 4

Views: 1404

Answers (1)

DoctorPangloss
DoctorPangloss

Reputation: 3073

Use data-uri driven images.

Images.insert({data:image.toBase64()});

The template could look like:

<img id="{{_id}}" src="data:image/jpg;base64,{{{data}}}"></img>

And the output would look like:

<img id="..." src="data:image/jpg;base64,iVBO..."></img>

To create this effect:

  1. Generate the images in a hidden container.
  2. Register a DOM Mutation Observer (e.g., with observer-summary) that fires whenever an image is added to the hidden container.
  3. When the DOM Mutation Observer detects a new image element placed into the container:
    1. Duplicate the element into a visible Masonry container, or any conventional method used to make an infinite scrolling container of images.
  4. When the user scrolls to the bottom of the page:
    1. Update the list of images that should appear. This will reactively load the images into a hidden container.
    2. ...which will reactively place them into your visible container.

With this procedure, you don't have to write any complicated Meteor.template.rendered code.

Alternatively,

Meteor.autorun(function() {
    var visibleImages = Session.get("newImages");
    _.each(visibleImages,function(image) {
        $("#container").append("<img src='" +image.data + "'></img>");
    });
})

...and put documents into the newImages session variable whenever there are new images.

Upvotes: 4

Related Questions