如何在流星中實現無限滾動？

Question

我有一大堆存儲在mongodb中的圖像縮略圖，我希望使用無限滾動技術在客戶端上渲染：顯示第一批圖像（即4行），當用戶向下滾動到批處理的最后一行時，向客戶端發送一批新內容。

是否有可能使用流星實現這一點？

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會話變量中。