4

無限スクロール技術を使用してクライアントにレンダリングしたい mongodb に保存されている画像サムネイルの大規模なコレクションがあります。画像の最初のバッチ (つまり、4 行) を表示し、ユーザーがバッチの最後の行までスクロールしたときに表示します。 、コンテンツの新しいバッチをクライアントに送信します。

meteor を使用してこれを実装することは可能ですか?

4

1 に答える 1

4

データ 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. observer-summary非表示のコンテナに画像が追加されるたびに起動する DOM Mutation Observer を登録します (例: を使用)。
  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新しい画像があるたびにドキュメントをセッション変数に入れます。

于 2012-12-14T07:32:50.490 に答える