How to show loading gif while iframe is loading up a website?
I have inc/content.php file which contains iframe with src= to my domain.
On my index.php
page I have but开发者_如何学Pythonton <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?
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">
<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)
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="" />
精彩评论