如何在Meteor中实现无限滚动？

Question

我在mongodb中有一个大量图像缩略图的收藏，我想使用无限滚动技术在客户端上呈现：显示第一批图像（即4行），当用户滚动到批次中的最后一行时，向客户端发送新内容的批次。

使用meteor实现这个功能是否可能？

- Vladimir Lebedev

Answer 1

使用数据URI驱动的图片。

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突变观察器（例如使用observer-summary），当向隐藏的容器添加图像时触发它。
3. 当DOM突变观察器检测到将新的图像元素放入容器时：
   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会话变量中。

- DoctorPangloss

---

非常感谢您的快速回答！让我试试哪种方法对我更好。还有一个问题：我是否正确地认为Mutation Observers在IE中没有实现？ - Vladimir Lebedev

observer-summary 使用变异事件作为后备方案。 - DoctorPangloss