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

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.