How to show loading gif while iframe is loading up

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?

Answer 1

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

Answer 2

If you want it to look nice, here is solution i use at job which puts a modal in the screen and a loading gif in the middle.

<script type="text/javascript">
function viewNext()
{  
  $('#loading').attr( 'src', 'some_path/loading.gif' );
  $('#container').block( { message: $( '#loading' ) } );
  $('#content').load('inc/content.php' , function(){ $('#container').unblock(); } );
}
</script>

it uses jquery.blockUI.js which allows me to block certain container, may be a div or the whole screen.

The html you need is this

<img id="loading" style="display: none;" src="" />

Answer 3

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">