CODEWITHSUNDEEP
javascriptjqueryhtmlfacebookiframe
keybored
keybored

Reputation: 5248

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

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.

Upvotes: 8

Views: 16562

Answers (4)

Hamza Khanzada
Hamza Khanzada

Reputation: 1525

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

  });
  });
 });

Upvotes: 1

M.W. Felker
M.W. Felker

Reputation: 4823

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.

Upvotes: 0

Jess
Jess

Reputation: 42948

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

Upvotes: 9

Matthew Abbott
Matthew Abbott

Reputation: 61617

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.

Upvotes: 1

Related Questions