Javascript callback after instagram embeds have loaded?

Question

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

Answer 1

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 comment on this answer.

Answer 2

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