在页面加载时显示图像

Question

我的网页正在使用一些api,并且页面加载的总处理时间大约为8秒.我想在页面加载时显示页面加载图像.可能就像整个页面变暗一样,显示的图像代表页面加载,一旦页面加载,我想回到我的页面.如何在php网站上显示此功能？

更多信息:在页面中的所有可视化都已完全加载之前,页面甚至没有加载.换句话说,只要点击链接,页面的URL就不会改变.一旦链接发生变化,网页就会被加载,所以任何解决方案或原因都会发生这种情况？

我实际上使用GAPI类来获取Google分析源并使用谷歌可视化javascript api来显示图像.我使用多个GAPI进行不同的数据参数调用,因为某个组合不会在一个命令中运行...

一个样品:

$pie->requestReportData(ga_profile_id,array('browser'),array('pageviews'),'-pageviews','',$start_date,$end_date,$start_index=1,$max_results=50); $ga->requestReportData(ga_profile_id,array('date'),array('visits','visitors'),'date','',$start_date,$end_date,$start_index=1,$max_results=50);

返回的值存储在一个数组中,用于google visualization api.

每个都存储在单独的文件中,我使用include()调用它们;

Answer 1

使用jQuery ...

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
    $("#loading").hide();
});
</script>

正下方的身体开始标记放...

<img id="loading" alt="" src="ajax.gif"/>

你可以在这里创建一些ajax加载GIF ... http://www.ajaxload.info/

添加此CSS ...

#loading{position:fixed;top:50%;left:50%;z-index:1104;}

更新

替换为此JS代码,保留googlecode行.

<script type="text/javascript">
$(document).ready(function()
{
    $("#info").load("info.php");
    $("#linechart").load("linechart.php");
    $("#piechart").load("piechart.php");
    $("#loading").hide();
});
</script>

HTML:

<div id="#info"></div>
<div id="#linechart"></div>
<div id="#piechart"></div>

希望能帮助到你.