How to show loading gif while iframe is loading up a website?

Question

I have inc/content.php file which contains iframe with src= to my domain.

On my index.php page I have button <button id="nextButton" onClick="viewNext();return false;">New</button> which when clicked calls following JavaScript function:

<script type="text/javascript">
function viewNext()
{
  $('#content').load('inc/content.php');
}
</script>

Function loads iframe from inc/content.php file into index.php page <div id="content"></div>

How can I show loading.gif image while inc/content.php file gets loaded into index file?

Solution 1

You can display the loading image before loading the page, and hide it when done (use the second parameter for adding a callback which is called when the request has completed):

$("#loading").show();
$("#content").load("inc/content.php", function () {
    $("#loading").hide();
});

Obviously, you need an element in your document with the ID loading, like:

<img id="loading" src="loading.gif" alt="Loading">

Solution 2

<script type="text/javascript">
function viewNext()
{
  show_loading()
  $('#content').load('inc/content.php' , hide_loading );
}

function show_loading(){ $('.loading').show() }
function hide_loading(){ $('.loading').hide() }
</script>

While "loading" is the classname of the div that contains loading.gif.

---

For the loading.gif image, you should put it into a div which can "float" at the center of your page like this :

HTMLCODE:

<div style="position:absolute; top:100px; left:50%;" class="loading">
     <img src="/img/loading.gif" />
</div>

You can change the appearing position of the loading image by changing the inline style "top:... ; left:....;". If you want to posiion the loading bases on screen, instead of the page's position, then replace position:absolute; by: position:fixed; (although this won't work with IE)

Comments

[Ilja]

$("#loading").show("loading.gif"); is that where I put path to image?

[Ilja]

it works for short time once I click the button, but doesn't stay while iframe is loading, here is how I use it inelmo.com/stuff click "new" button and you will see. (I didn't use image just text saying "loading")

[Lekensteyn]

@IlyaKnaup Add an onload handler to the iframe in question which calls the hide function in your page: jsfiddle.net/uTRGy

[Ilja]

changed function to " function loader () { $("#loading").hide(); }); " and added onload evenr to iframe " <iframe id="stuffFrame" onLoad="preload();"</iframe> " Still doesn't work.

[Ilja]

Ok, I got it working, but the thing is that it shows Loading and iframe at the same time, my idea was that it wil show loading gif and than iframe loads sow iframe.

[Ilja]

what is #container for? Do I need to make another element?

[Lekensteyn]

What about hiding the iframe by default and making the callback function (notify) display the iframe?

[e_liel]

#container in my case is the div elemet which contains the iframe, this way the gif will be displayed only in the iframe i'm loadig, it works for me since the other iframes in my screen are a menu and a toolbar :) i hope it can helps you.