I'm attempting to tile multiple Instagram embeds with Masonry. Problem is the instagram embeds change sizes after loading so the layout leaves gaps.

Is there a callback that i can use when all instagram embeds on the page have loaded? I'm thinking i should trigger masonry again after the Instagram embeds have loaded and resized properly

tried $(document).ajaxStop() didn't work

I'm attempting to tile multiple Instagram embeds with Masonry. Problem is the instagram embeds change sizes after loading so the layout leaves gaps.

Is there a callback that i can use when all instagram embeds on the page have loaded? I'm thinking i should trigger masonry again after the Instagram embeds have loaded and resized properly

tried $(document).ajaxStop() didn't work

• javascript
• embed
• instagram
• masonry

• why don't you load it first from instagram then render the Masonry? – aswzen Commented May 25, 2015 at 7:24
• Are you hard-coding those embeds? Do they obey any rule of choosing (last pics of some hashtag, last pics of specific user)? It sounds to me that you should make a request to the Instagram API, get all the photos at the same time and create your own html with the response (json). But this method depends on how are you selecting the photos. – Léo Muniz Commented May 26, 2015 at 0:41
• @aswzen yes that's exactly what i'm trying to do, care to elaborate on how to achieve that? What happens now is when the page loads the instagram embeds are loaded partially (in text form), and then iam assuming it makes ajax calls to load the image and stylesheets for the iframe. I need a way to know that the embeds have finished loading properly so i can trigger masonry – George Ananda Eman Commented May 26, 2015 at 3:11
• @LéoMuniz I'm currently embedding by copying the embed code into a new post (via the wordpress TinyMCE editor on the text tab), i have several of these each as a separate post – George Ananda Eman Commented May 26, 2015 at 3:12
• I've deleted my answer because i miss understand the question. – ecarrizo Commented May 28, 2015 at 17:26

2 Answers 2

I had an issue dealing with resizing due to AJAX requests when I was using the Twitter Javascript Embed code. I resolved this by using the following code:

$('#div').bind("DOMSubtreeModified", function() {
    // ...
});

This code will execute when elements are modified under a div element with an id of div. This was very useful. If you need more assistance, don't be afraid to ment on this answer.

There's a solution by Daniel Buchner you can use to detect (event callback) element resize. You can wrap each embed in an element (<div>) and attach the resize listener to your div. Whenever there's a resize, trigger Masonry. If that bees over saturated with rearrange triggers, set a timeout (500ms) when the resize event occurs to only rearrange after a stable period.

The resize listener is available here.