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

Markson

why don't you load it first from instagram then render the Masonry? – Invasive

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. – Scrub

@Invasive 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 – Markson

@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 – Markson

I've deleted my answer because i miss understand the question. – Incept

I think that my answer was partially responding that you need, you can create promises and once all the promises resolved execute your code. but, i cannot create a real answer for you if cant verify how te embeds will work, have an example? – Incept

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.

Eklund

Works wonderfully with Instagram too.. I used it to get the final height of the div, but it was returning the old height, so I used window.setTimeout('function()',50); and now it works great – Ticktock

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.

Chaille

Sounds good, though i'm abit wary about using a timeout. will give this a try ASAP – Markson