如何在流星中实现无限滚动？

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.

我有一大堆存储在mongodb中的图像缩略图，我希望使用无限滚动技术在客户端上渲染：显示第一批图像（即4行），当用户向下滚动到批处理的最后一行时，向客户端发送一批新内容。

Is it possible to implement this using meteor?

是否有可能使用流星实现这一点？

1 个解决方案

#1

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:

要创建此效果：

Generate the images in a hidden container.
在隐藏的容器中生成图像。
Register a DOM Mutation Observer (e.g., with observer-summary) that fires whenever an image is added to the hidden container.
注册DOM Mutation Observer（例如，使用observer-summary），只要将图像添加到隐藏容器，就会触发它。
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.
2. 将元素复制到可见的Masonry容器中，或者用于制作无限滚动图像容器的任何常规方法。
当DOM Mutation Observer检测到放置在容器中的新图像元素时：将元素复制到可见的Masonry容器中，或者用于制作无限滚动容器图像的任何常规方法。
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. 更新应显示的图像列表。这将反应性地将图像加载到隐藏的容器中。
3. ...which will reactively place them into your visible container.
4. ......它会将它们反应性地放入你的可见容器中。
当用户滚动到页面底部时：更新应显示的图像列表。这将反应性地将图像加载到隐藏的容器中。 ......它会将它们反应性地放入你的可见容器中。

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

使用此过程，您不必编写任何复杂的Meteor.template.rendered代码。

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.

...只要有新图像，就将文档放入newImages会话变量中。

#1