Instafeed and Masonry

Question

I have this code below where I am trying to use Instafeed and Masonry together. Everything works fine until I click the "Load more" button. Then the Masonry layout breaks. It's probably because something is loading before the other or vice versa. I'm new to this so all help would be greatly appreciated.

I got the tip to use imagesLoaded instead of window.load and also to use appended method. But I don't understand how to incorporate that in to my code.

My code is in a script.js doc and outputs in the footer of the page after instafeed.js and masonry.

$(function () {
    var loadButton = document.getElementById('load-more');

    if(loadButton !== null) {
        var userFeed = new Instafeed({
          get: 'user',
          userId: xxxxxxxxx,
          accessToken: 'xxxxxxxxx',

          limit: 6,
          resolution: 'standard_resolution',
          template: '<div class="col30 grid image-top-fill instapic"><a href="{{link}}" title="Besök Instagram" class="" id="{{id}}"><img src="{{image}}" alt="Instagram" /></a> <p class="nomargin">{{caption}}</p></div>',
        after: function() {
            if (!this.hasNext()) {
                loadButton.setAttribute('disabled', 'disabled');
                Masonry.start();
            }
        }
    });

    loadButton.addEventListener('click', function() {
        userFeed.next();
    });
    userFeed.run();
}
});

$(window).load(function(){
    var container = document.querySelector('#instafeed');

    var msnry = new Masonry( container, {
      itemSelector : '.instapic',
      isAnimated : true,
      isFitWidth : false
    });

});

Thanks in advance for your help! Let me know if there is anything more you need from me.

Cheers / Jeppe

Answer 1

You're correct in that Masonry is trying to work with elements before they're loaded. You can put .masonry('appended', $items) in the after event of Instafeed. Instafeed's developer posted this fix:

https://github.com/stevenschobert/instafeed.js/issues/118#issuecomment-44438003