instagram embeds.js handler to know when the iframe is loaded

Question

I'm using embeds.js to display instagram posts on a website. referring to https://www.instagram.com/developer/embedding/

I use also the widgets.js for twitter and with it I can load a twit, set an handler to get when the iframe is ready and then call twttr.widgets.load() in this way:

twttr.events.bind('rendered', function (event) {
    //do something when the iframe is ready
});
twttr.widgets.load();

Does anybody know if there is a similar feature or maybe a workaround to get when the instagram iframe is ready?

After loading the instagram post I use:

instgrm.Embeds.process();

to render the iFrame.

side note: the application is made with angular/jquery, so the workaround can be done with those libraries.

Thanks in advance, Daniele

score 6 · Answer 1 · answered Apr 24 '17 at 08:56

6

I found a solution if you can not use iframe embeds.

window.__igEmbedLoaded = function( loadedItem ) {
  // do something here...
};

answered Apr 24 '17 at 08:56

Ante Primorac

61
1
4

score 2 · Accepted Answer · answered Dec 23 '15 at 20:36

Just use a iframe Instagram embed and use the onload event handler to trigger a function:

<script>
function doSomething(){
   alert("Instagram embed loaded");
}
</script>

<iframe onload="doSomething()" src="https://www.instagram.com/p/8_kRtJBsBq/embed" width="400" height="480" frameborder="0" scrolling="no" allowtransparency="true"></iframe>

You can generate an iframe Instagram embed coding using gramfeed: http://gramfeed.com/instagram/embed

add onload="someFunction()" to the generated iframe embed code.

instagram embeds.js handler to know when the iframe is loaded

2 Answers2