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

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