在页面加载时显示图像答案

【问题标题】：Show image while page is loading在页面加载时显示图像
【发布时间】：2015-11-09 23:11:34
【问题描述】：

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

更多信息：在页面中的所有可视化完全加载之前，页面甚至不会加载。换句话说，即使点击链接，页面的 URL 也不会改变。一旦链接发生变化，网页就会被加载，那么有什么解决方案或发生这种情况的原因吗？

我实际上是使用 GAPI 类来获取谷歌分析提要并使用谷歌可视化 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可视化api。

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

【问题讨论】：

您确定某些缓存不正常吗？
您可以为它编写小的 JavaScript 代码或根据您的要求使用 jQuery。但这绝对是 PHP 做不到的！

标签： javascript

【解决方案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>

希望对你有帮助。

【讨论】：

我应该把 JQuery 的东西放在哪里？我刚刚将您的 jquery 代码放在我网页的第一行。此网页中没有正文标签。该站点在 index.php 中只有一个模板，单击的每个页面都将加载到 index.php 主页面的 <body> 标记中。我希望我很清楚。当我将此 jquery 代码放在我的网页上时，它根本没有加载。
您需要先加载 jQuery FW，好的，只需复制和粘贴第一个代码（我编辑过）。你必须把 img 放在身体的任何地方，我相信你可以做到。更改 index.php。第三，将我的 CSS 添加到您的 CSS 文件中，应该就是这样。
感谢 webarto，它工作正常，但问题是页面本身没有被立即调用。我已经编辑了我的原始问题，那里有更多信息。 include ('info.php'); include ('linechart.php'); include ('piechart.php'); 这些文件包含 GAPI 调用和 Google 可视化 API。拥有多个包含会减慢进程？
您可以通过 jquery 异步加载它们，这意味着您的页面加载，然后通过 AJAX 在三个不同的 DIV 中调用这三个文件。然后您可以显示加载 gif，完成后将其隐藏。应该这样做。
往下看更新，试试这个方法，我想你是 jQuery 新手，这很简单。

【解决方案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>

【讨论】：

如果您想在数据加载之前显示加载器图像，那么您必须使用窗口加载函数而不是文档加载函数。运行这两个函数并检查两个函数的差异。

【解决方案3】：

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

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

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

无论如何，我会在优化上投入更多时间。或者做一个简单的主页，然后通过 AJAX 完成其余的功能。

【讨论】：

不可能做一个明亮的版本，因为这个页面有多个视觉效果和 api 调用，这就是他们想要的......所以最好的选择是显示一个图像。你能更详细地解释一下你的同花顺想法吗？

【解决方案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>

【讨论】：