0

Backbone.js でアプリを作成し、gridify を使用して写真をグリッド状に配置しています。問題は、画像が非同期に読み込まれることであり、これがグリッド化の問題を引き起こしているようです。すべての ascyn 呼び出しが終了した後に gridify 関数を呼び出す方法はありますか? 呼び出しをポスト レンダリングに配置しようとしましたが、これは役に立たないようです。これが私のコードです：

TemplateContext では:

        var images = [];
        this.model.get('images').each(function (imageModel) {
            var image = imageModel.toJSON()                
            images.push(image);
        }, this);
        return {               
            images: images,
            view:this
        }

ポスト レンダー:

 var options =
      {
          srcNode: 'img',             // grid items (class, node)
          margin: '20px',             // margin in pixel, default: 0px
          width: '250px',             // grid item width in pixel, default: 220px
          max_width: '',              // dynamic gird item width if specified, (pixel)
          resizable: true,           // re-layout if window resize
          transition: 'all 0.5s ease' // support transition for CSS3, default: all 0.5s ease
                    }

$('.grid').gridify(options);

そして私のテンプレートでは：

<div id="activity" class = "grid" style="border: 1px solid black;">
    {{#if images }}
        {{#each images}}
                <img src ="?q=myApp/api/get_images&imgId={{id}}&imgSize=medium" >
        {{/each}}
    {{else}}
        No images have been uploaded
    {{/if}}
</div>

これにより、すべての画像が互いに積み重ねられます。gridifyが呼び出された後に画像がロードされるという事実のために、gridifyが寸法がどうあるべきかを知らないためだと思います。テンプレートで静止画像を使用するだけであれば、問題なく動作します。バックボーンまたはグリッド化でこれを処理する方法について誰か提案がありますか?

ありがとうジェイソン

4

3 に答える 3

0

ドキュメントから：

http://mattlayton.co.uk/gridify/#examples

画像がコンテンツの一部である場合、すべての画像が読み込まれた後に Gridify を呼び出して、実際の画像の寸法を考慮することができます。コードは次のようになります。

$(window).load(function() {
  $('.grid').gridify();
});

画像が動的に読み込まれる場合:

https://stackoverflow.com/a/2311794/566092

https://stackoverflow.com/a/5424432/566092

https://www.google.co.in/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#safe=off&q=how+to+know+all+images+are+loaded

于 2014-09-29T06:21:50.633 に答える
0

私がやったのは、指定された寸法でdivを作成することでした。次に、画像をdivに配置し、div自体でgridifyを使用しました。そうすれば、gidify は div に対してその役割を果たし、画像は後で読み込むことができます。

于 2014-09-29T14:36:06.743 に答える
0

CSS3 トランジションがすべて 0.5 に設定されていることに起因する問題。アニメーションから幅と高さを削除しました。

最新のソースコードで既に修正されています https://github.com/hongkhanh/gridify

于 2014-10-06T09:50:06.603 に答える