图像完成异步加载后使用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中修复。