在图像同步加载完成后使用Gridify

Using Gridify after images finish loading ascyncronously

本文关键字：Gridify 图像 同步 加载      更新时间：2023-09-26

我正在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之后会加载图像。如果我只是在模板中使用静态图像，它可以很好地工作。有人对如何处理这件事有什么建议吗？

谢谢jason

来自文档：

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-即时&离子=1&espv＝2&ie=UTF-8#safe=off&q=如何+到+知道+所有+图像+是+加载

我最终做的是创建一个具有给定维度的div。然后，我将图像放在div中，并在div本身上使用gridify。通过这种方式，gidify对div执行它的操作，并且图像可以稍后加载。

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

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

相关文章：