How do I add a loading indicator to my page while my iframe loads?

Question

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.

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, Jan 03 '11 at 18:49

score 9 · Accepted Answer · answered Jan 03 '11 at 22:15

9

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(); }

answered Jan 03 '11 at 22:15

Jess

42,368
6
37
51

2

Hey thanks! This was ultimately the approach I took with a slight change. $('#mydiv').html(''); Is it any more or less correct to approach the problem this way? – keybored Jan 05 '11 at 18:51

score 1 · Answer 2 · answered May 08 '19 at 11:24

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(); 

  });
  });
 });

score 0 · Answer 3 · answered Jan 03 '11 at 18:52

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.

I had thought to add this point but I can see now that I missed it. The content filling the iframe is not content I have any control over or access to (other than to display it). It comes from a different domain. — keybored, Jan 03 '11 at 19:32

score 0 · Answer 4 · answered Jan 03 '11 at 22:18

0

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.

answered Jan 03 '11 at 22:18

M.W. Felker

4,777
1
20
19

This might cause issues like the following: http://stackoverflow.com/questions/6799534/high-cpu-usage-of-javascript-how-to-debug (High CPU usage because of the animated gif below the iframe). – blueyed Jan 03 '14 at 22:57

How do I add a loading indicator to my page while my iframe loads?

4 Answers4

Linked