0

我正在 Backbone.js 中构建一个应用程序，并使用 gridify 以网格方式排列我的照片。问题是图像是异步加载的，这似乎导致了网格化问题。有没有办法在所有 ascyn 调用完成后调用 gridify 函数？我尝试将调用置于后期渲染中，但这似乎没有帮助。这是我的代码：

在模板上下文中：

        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 中处理此问题有任何建议吗？

谢谢杰森

4

3 回答 3

0

由于 CSS3 转换导致的问题全部设置为 0.5。我已经从动画中删除了宽度和高度。

它已经在最新的源代码中修复了https://github.com/hongkhanh/gridify

于 2014-10-06T09:50:06.603 回答
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 回答