如何在iframe加载网站时显示加载gif？

Question

我有inc/content.php文件,其中包含iframe和src =到我的域名.

在我的index.php页面上,我有一个按钮<button id="nextButton" onClick="viewNext();return false;">New</button>,点击后调用以下JavaScript函数:

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

函数将iframe从inc/content.php文件加载到index.php页面<div id="content"></div>

如何loading.gif在inc/content.php文件加载到索引文件时显示图像？

Answer 1

您可以在加载页面之前显示加载图像,并在完成后隐藏它(使用第二个参数添加在请求完成时调用的回调):

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

显然,您需要文档中包含ID的元素loading,例如:

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

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

而"loading"是包含loading.gif的div的类名.

对于loading.gif图像,你应该将它放入一个可以"漂浮"在页面中心的div,如下所示:

HTMLCODE:

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

您可以通过更改内嵌样式"top:...; left:....;"来更改加载图像的显示位置.如果你想在屏幕上定位加载基础,而不是页面的位置,那么替换position:absolute;为:( position:fixed;虽然这不适用于IE)