在页面加载时显示图像 [英] Show image while page is loading

问题描述

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

My webpage is using some api's together and the total process time for the page to load is around 8 seconds. I want to show a page loading image while the page is loading. Could be like the whole page is dimmed out and an image is shown which represents the page loading and once the page loads i want to go back to my page. How can i show this functionality in a php website?

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

Little more info: The page is not even loading until all the visualizations in the page have completely loaded. In other words, the URL of the page is not even changing as soon as the link is clicked. As soon as the link is changing, the webpage is loaded, so any solution or reason why this is happening?

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

I am actually using GAPI class to get Google analytics feed and using google visualization javascript api to show the images. I am using multiple GAPI for different data parameter calls since one certain combinations wont work in one command...

样本：

$ 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'，'visitor'），'date'，''，$ start_date，$ end_date，$ start_index = 1，$ max_results = 50）;

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

The values returned are stored in an array and used for google visualization api.

每个都存储在单独的文件中，我使用include（）;

Each of this is stored in seperate files and i am calling them using include ();

推荐答案

使用jQuery ...

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

在正文开头标记下面......

Right below body start tag put...

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

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

You can create some ajax loading gifs here... http://www.ajaxload.info/

添加此CSS ...

Add this CSS...

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

更新

替换为此JS代码，离开googlecode行。

Replace with this JS code, leave the googlecode line.

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

希望有所帮助。

这篇关于在页面加载时显示图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！