Question

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

更多信息：在页面中的所有可视化都已完全加载之前，页面甚至不会加载。换句话说，只要点击链接，页面的URL就不会改变。一旦链接发生变化，网页就会被加载，所以解决这个问题的原因是什么？

我实际上正在使用GAPI类获取Google分析Feed并使用google visualization 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>

希望它有所帮助。

Answer 2

使用以下功能：

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">

$(window).load(function()

{

    $("#loading").hide();

});
</script>

Answer 3

嗯，这条道路上几乎没有问题。

首先，输出html以显示加载屏幕，然后运行flush（）命令。确保您在php或apache中没有任何gzip压缩，因为内容不会发送到浏览器。

然后，你必须祈祷浏览器足够聪明才能渲染它，而不是等待xxx kb的数据直到下一次渲染。

无论如何，我会投入更多时间进行优化。或者做一个轻量级主页，并通过AJAX完成剩下的功能。

Answer 4

这实际上不是php。但你可以这样做：

将以下内容添加到头部：

<script type="text/javascript" language="javascript">
function wait()
{ 
    if(document.getElementById)
    {
        document.getElementById('waitpage').style.visibility='hidden';
    }
    else
    {
    if(document.layers)
    {
        document.waitpage.visibility = 'hidden';
    }
    else
    {
        document.all.waitpage.style.visibility = 'hidden';
    }
    }
}
</script>

将<body>更改为<body onLoad="wait();">

并在正文部分的开头添加以下内容：

<div id="waitpage" style="left:0px; top:0px; position:absolute; layer-background-color:white; height:100%; width:100%;"> 
<table width="100%" height="100%">
    <tr>
        <td><img src="path-to-image"/></td>
    </tr>
</table>
</div>

在页面加载时显示图像

4 个答案: