I am currently creating a page where upon clicking a link an iframe is inserted into a div and it's contents loaded. I do this using the following jQuery call:

$('#mydiv').html('<iframe src="sourcelink.html" frameborder="0" width="760" height="2400" scrolling="no"></iframe>');

Sometimes the source content loads very slowly and, as a result, it looks like nothing is happening. I would like to have a simple loading animation while the content is loading while the iframe's content loads. When the iframe finishes loading it's content should pop in and the loading animation should go away.

I've been considering a couple ways I could do this (e.g. having a separate loader div to simply swap the two in and out) but I'm not sure of what the 'best' approach to solving this problem is. Perhaps I shouldn't be using .html()? I'm open to suggestion if there is a more correct solution.

I am currently creating a page where upon clicking a link an iframe is inserted into a div and it's contents loaded. I do this using the following jQuery call:

$('#mydiv').html('<iframe src="sourcelink.html" frameborder="0" width="760" height="2400" scrolling="no"></iframe>');

Sometimes the source content loads very slowly and, as a result, it looks like nothing is happening. I would like to have a simple loading animation while the content is loading while the iframe's content loads. When the iframe finishes loading it's content should pop in and the loading animation should go away.

I've been considering a couple ways I could do this (e.g. having a separate loader div to simply swap the two in and out) but I'm not sure of what the 'best' approach to solving this problem is. Perhaps I shouldn't be using .html()? I'm open to suggestion if there is a more correct solution.

• javascript
• jquery
• html
• facebook
• iframe

• what is in "sourcelink.html"? Is it a full HTML page? I'm just wondering if it needs to be in an iframe at all – hunter Commented Jan 3, 2011 at 18:49

4 Answers 4

Is there any reason you can't listen to the onload event of the iframe itself? It should fire after the child content has loaded.

Something like this:

showLoader();
$('#mydiv').html('<iframe src="sourcelink.html" frameborder="0" width="760" height="2400" scrolling="no"></iframe>');
$('#mydiv iframe').load(function() { hideLoader(); }

You need to define a method that allows your iframe to highlight that it has finished loading, e.g.:

Main page:

var ChildFrameComplete = function()
{
    $("#progress").hide();
};

var LoadChildFrame = function()
{
  $("#progress").show();
  $("#mydiv").html("<iframe src=\"sourcelink.html\" ... ></iframe>");
};

sourcelink.html:

$(function()
{
  parent.ChildFrameComplete();
});

If the iframe is being sourced from the same domain as the parent page domain, it can call methods defined in the parent page through the window.parent property.

So In my case doing the following did for me..

The HTML

<iframe id="ifrmReportViewer" src="" frameborder="0" style="overflow:hidden;width:100%; height: 1000px;"></iframe>

and I was loading the iFrame on button of a click, so here is the JS

 $(document).ready(function () {

  $('body').on('click','#btnLoadiFrame',function () {

  ShowLoader();

  $('#ifrmReportViewer').attr('src', url);

  $('#ifrmReportViewer').load(function () {

    HideLoader(); 

  });
  });
 });

Just give the containing element (this case #myDiv) a background of a throbber and the iframe contents will overlap this when it's done loading.

That's the simplest.