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

Question

我有大量存储在 mongodb 中的图像缩略图集合，我想使用无限滚动技术在客户端上呈现：显示第一批图像（即其中 4 行）以及当用户向下滚动到批处理中的最后一行时，向客户端发送一批新的内容。

是否可以使用流星来实现这一点？

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 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...并在有新图像时将文档放入会话变量中。