Only load an iframe after class appears in container div (no jquery)

Question

I have a unique issue where I am loading a lot of iframes on a page and it significantly reduces performance.

Since they are all inside of popup modals, I want to trigger the iframe to load after someone clicks on the modal.

When the modal loads using JS, a class is added called '.in' and this data attribute is changed from true to false "aria-hidden="false".

Here is a sample of the DIV as the trigger:

<div id="ModalPopUp-data-integration-service" class="modal hide fade in" data-
backdrop="true" data-keyboard="true" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false" style="display: block;">

Here is the iframe I want to load:

<iframe src="http://XXXXX.com" width="100%" height="800" type="text/html" frameborder="0" allowtransparency="true" style="border: 0"></iframe>

if you are handling the click event for the popup, you can always set the src of the iframe at that time. Initially you can set the iframe to have an empty "src" or set the "src" to an empty html. — Jas
I want to trigger the iframe to load after someone clicks on the modal You have to better describe what behaviour you are expecting? Which click? And see @Jas comment, just set src attribute of iframe when needed — A. Wolff
You can also use a Mutation Observer to observe changes in the DOM on an element. Have a look at the MDN Docs on Mutation Observers — Ohgodwhy
@Jas Yes, jas that would be ideal. I am really terrible with JS so help figuring out how to write the code is what I need. — frameworkgeek

A. Wolff A. Wolff · Accepted Answer · 2015-12-10T20:45:45

This is what you could use. Don't set src attribute by default for iframe, but e.g data-src one:

<iframe data-src="http://XXXXX.com" width="100%" height="800" type="text/html" frameborder="0" allowtransparency="true" style="border: 0"></iframe>

Then once needed, set the relevant src attribute depending data one. You could use transitionend event for that:

document.addEventListener('transitionend', function(e) {
  var iframe = e.target.id === "ModalPopUp-third-party-content" && e.target.querySelector('iframe');
  if (iframe && !iframe.src) {
    iframe.src = iframe.dataset.src;
  }
}, false);

That's said, you'd have better to use relevant modal event onshown, check doc. BUT your site is really really buggy and gives headhache to debug. I really don't want to be rude. It would need serious refactorization like said in other answer.

I'm even not sure why you use iframes when i guess a single form, setting on each opening event modal relevant info would be enough.

Only load an iframe after class appears in container div (no jquery)

1 Answers