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

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

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

解决方法:

使用数据驱动的图像.

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

模板可能如下所示：

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

输出看起来像：

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

要创建此效果：

>在隐藏的容器中生成图像.
>注册DOM Mutation Observer(例如,使用observer-summary),只要将图像添加到隐藏容器,就会触发该观察器.
>当DOM Mutation Observer检测到放入容器的新图像元素时：

>将元素复制到可见的Masonry容器中,或者用于制作无限滚动图像容器的任何常规方法.

>当用户滚动到页面底部时：

>更新应显示的图像列表.这将反应性地将图像加载到隐藏的容器中.
> …将它们反应性地放入您的可见容器中.

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

或者,

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

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

标签：javascript,meteor,infinite-scroll
来源： https://codeday.me/bug/20190625/1286934.html