Show iframe first when content is loaded

Question

I have a problem. I can't figure out how I can load an iframe with jQuery or Ajax, and when the content is loaded inside the iframe, then output it to the page.

The problem is that, I am loading an external page on my web site, and sometimes the external page is very slow or does not load. If that happens I don't want the browser to keep trying to load the iframe on my web site, and I don't want a big blank space.

So I need to load an external page in a iframe, without the browser loads and first when or if the content is loaded, then the iframe is showed on the website. Is this possible?

Why do you want to load an iframe via ajax? Why don't you just have the iframe element inside your page? — CharliePrynn, Apr 10 '13 at 12:30
This might get handy in case... http://stackoverflow.com/questions/1182031/document-ready-and-iframe-content — Hiren Pandya, Apr 10 '13 at 12:31

score 0 · Answer 1 · answered Apr 10 '13 at 12:33

0

Try with "on load" like

$('#my_iframe').on('load', function(){
    $(this).show(); 
 });

answered Apr 10 '13 at 12:33

Gautam3164

28,027
10
58
83

score 0 · Answer 2 · answered Apr 10 '13 at 12:37

0

put the iframe in the page:

<div id="theIframeContainer" style="display:none">
  <iframe src="theSite"></iframe>
<div>

then, jquery code

$(function() {
  $("#theIframeContainer").show();
}

answered Apr 10 '13 at 12:37

Eduard

3,308
1
18
25

Show iframe first when content is loaded

2 Answers2