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

Question

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

是否可以使用meteor实现这一点？

Answer 1

使用数据驱动的图像。

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

模板看起来像：

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

输出看起来像：

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

要创建此效果：

1. 在隐藏的容器中生成图像。
2. 注册一个DOM Mutation Observer（例如observer-summary），只要将图像添加到隐藏容器中，就会触发。
3. 当DOM Mutation Observer检测到放入容器的新图像元素时：
   1. 将元素复制到可见的Masonry容器中，或者用于制作无限滚动图像容器的任何传统方法。
4. 当用户滚动到页面底部时：
   1. 更新应显示的图像列表。这会将图像反应性地加载到隐藏的容器中。
   2. ...会将它们反应性地放入您的可见容器中。

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

可替换地，

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

...并在有新图像时将文档放入newImages会话变量。