圖像完成異步加載后使用Gridify

Question

我正在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之后加載了圖像。 如果我僅在模板中使用靜態圖像，則效果很好。 任何人對如何在主干網中或通過gridify處理此問題有任何建議？

謝謝傑森

Answer 1

從文檔：

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+已加載

Answer 2

我最終要做的是創建具有給定尺寸的div。 然后我將圖像放在div中，並在div本身上使用gridify。 這樣，gidify就對div進行處理，以后可以加載圖像。

Answer 3

由於CSS3過渡而導致的所有問題均設置為0.5。 我從動畫中刪除了寬度和高度。

它已經在最新的源代碼https://github.com/hongkhanh/gridify中修復。