Using Gridify after images finish loading ascyncronously

Question

I am building an app in Backbone.js and using gridify to arrange my photos in a grid fashion. The problem is that the images get loaded asynchronously and this seems to be causing gridify issues. Is there a way to call the gridify function after all ascyn call are finished? I tried placing the call in post render, but this does not seem to help. Here is my code:

In TemplateContext:

        var images = [];
        this.model.get('images').each(function (imageModel) {
            var image = imageModel.toJSON()                
            images.push(image);
        }, this);
        return {               
            images: images,
            view:this
        }

In Post Render:

 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);

and in my template:

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

This causes all the images to be stacked on top of each other. I think it's because gridify doesn't know what the dimensions should be due to the fact the images get loaded after gridify is called. If I just use static images in my template, it works fine. Anyone have any suggestions on how to handle this either in backbone or with gridify?

thanks jason

Answer 1

From the docs :

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

When images are part of your content you will want to call Gridify after all images are loaded so that the true image dimentions can be considered. Your code should look something like this:

$(window).load(function() {
  $('.grid').gridify();
});

In case the images are loaded dynamically :

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 2

What I ended up doing was creating a div with the given dimensions. Then I placed the images in the div and using gridify on the div itself. That way, gidify does its thing to the divs and the images can load later.

Answer 3

The problem due to CSS3 transition set to 0.5 for all. I have removed width and height from the animation.

It has already fixed in the latest sourcecode https://github.com/hongkhanh/gridify