在圖像完成加載後使用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被調用之後圖像被加載。如果我只是在我的模板中使用靜態圖像，它工作正常。任何人有任何建議如何處理這在骨幹或網格化？

感謝 傑森

Answer 1

我最終什麼事做的是創造一個具有給定尺寸的div。然後我將圖像放在div中，並在div上使用gridify。這樣，gidify就可以對div進行處理，並且圖像可以在以後加載。

Answer 2

從文檔：

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

當圖像內容的一部分，你會想打電話給Gridify所有圖像加載後，這樣的真實形象dimentions可考慮。您的代碼應該看起來像 這樣：

$(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

Answer 3

由於CSS3轉換導致的問題全部設置爲0.5。我已經從動畫中移除了寬度和高度。

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