How can you temporary remove an iframe from a page, and later add the iframe back without re-downloading the iframe content?

Question

I have a page with some IFrames. These IFrames are on the same domain. I wanted to remove the iframe contents from the page when I opened a modal window, to reduce lag in the modal window.

And then, when I close the modal window, I'm hoping to reattach the IFrames to the page.

The problem is, every method I try re-downloads the IFrames when I reattach them. I'm unsure if it's even possible to do this.

As an example, jQuery has a detach method that is supposed to not require you to download the content again, but this does not work.

var detatchWidgets =  $container.find("iframe");

detatchWidgets.detach();

msgDialog.on('hidden.bs.modal', function(){
    $container.append(detatchWidgets);    
});

Answer 1

first of all, sorry if i missunderstand you. just for testing i created 2 JSFIDDLE's:

1) i used as the src of the iframe, it alerts 2 sec after iframe loaded

https://jsfiddle.net/hr97240j/10/

setTimeout(function(){
    alert("loaded and iframe says hello");
},2000);

2) here is a page where the iframe is embbed.

https://jsfiddle.net/hr97240j/12/

in the 2nd i show the iframe, then hide it, after 3 sec i show it again, i can say, the src of the iframe is not reloaded again! i see the contents of the iframe without any new alerts as in the first load.