gridify.js only lays out after the page changes size

Question

Having this issue with gridify - the images only get layed out after I either zoom in or zoom out on the page. This doesn't happen on any of the example pages.

This is my code:

$(document).ready(function(){
    var albumId = "xxxxxxxxxxxxx";
    $.ajax({
        dataType:"json",
        url:'http://graph.facebook.com/' + albumId + '?fields=photos.fields%28images,source,picture,link,name%29,photos.limit%2840%29&_=1425840156371',
        success:function(incomming){
            var photos = incomming.photos.data;
            for (var key in photos){
                $("#photos").append("<img src='" + photos[key].source + "' class='image'>");
            }
        },
        error:function(err){
            console.log("Error collecting photos: " + JSON.stringify(err, null, 2));
        }
    });
});
$(window).load(function() {
    var options = {
        items:3,
        srcNode: 'img',
        margin: '20px',
        width: '250px',
        resizable: true,
        transition: 'all 0.5s ease'
    }
    $('.grid').gridify(options);
});

My .grid element starts out as an empty div.

score 2 · Accepted Answer · answered Mar 10 '15 at 12:11

Your problem is down to when you're doing things (not what you're doing). So, you want to achieve this:

Make an ajax call to Facebook to grab some images
Append the new markup from Facebook to your DOM
Call the gridify function to arrange the markup added to your page

The .ready() event takes places after the HTML document has been loaded, and it's here you are doing (1) and (2). The onload event occurs once all content (including images etc.) on the page has finished downloading, and it's here you're doing (3). So, that sounds okay...

Importantly though, the onload event is not going to wait until your asynchronous call to Facebook is finished - it has no knowledge of that, it's only going to hang around for markup that's already on the page. This means you are starting an asynchronous call, then immediately jumping to (3) before it is finished. Your gridify function is being called, there's just nothing there yet for it to work with.

You might get lucky with this arrangement (sometimes it might work), but as you've found it is not very robust. To ensure (1), (2), (3) run in order, just tweak the order of your code slightly, putting the gridify function in you callback from Facebook:

$(document).ready(function(){
  var albumId = "xxxxxxxxxxxxx";
  var options = {
    items:3,
    srcNode: 'img',
    margin: '20px',
    width: '250px',
    resizable: true,
    transition: 'all 0.5s ease'
  };
  $.ajax({
    dataType:"json",
    url:'http://graph.facebook.com/' + albumId + '?fields=photos.fields%28images,source,picture,link,name%29,photos.limit%2840%29&_=1425840156371',
    success:function(incomming){
      var photos = incomming.photos.data;
      for (var key in photos){
        $("#photos").append("<img src='" + photos[key].source + "' class='image'>");
      }
      $('.grid').gridify(options);
    },
    error:function(err){
      console.log("Error collecting photos: " + JSON.stringify(err, null, 2));
    }
  });
});

I haven't been able to test this, but hopefully that at least points you in the right direction.

gridify.js only lays out after the page changes size

1 Answers1