可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):
问题:
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?
回答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">
回答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)
回答3:
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="" />
