在页面加载时显示图像
[英]Show image while page is loading
问题描述
My webpage is using some api's together and the total process time for the page to load is around 8 seconds. 
我的网页正在使用一些api，并且页面加载的总处理时间大约为8秒。 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? 如何在php网站上显示此功能？
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. 换句话说，只要点击链接，页面的URL就不会改变。 As soon as the link is changing, the webpage is loaded, so any solution or reason why this is happening? 一旦链接发生变化，网页就会被加载，所以任何解决方案或原因都会发生这种情况？
I am actually using GAPI class to get Google analytics feed and using google visualization javascript api to show the images. 我实际上使用GAPI类来获取Google分析源并使用谷歌可视化javascript api来显示图像。 I am using multiple GAPI for different data parameter calls since one certain combinations wont work in one command... 我使用多个GAPI进行不同的数据参数调用，因为某个组合不会在一个命令中运行...
a sample: 一个样品：
$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);
The values returned are stored in an array and used for google visualization api. 返回的值存储在一个数组中，用于google visualization api。
Each of this is stored in seperate files and i am calling them using include (); 每个都存储在单独的文件中，我使用include（）调用它们;
4 个解决方案
解决方案1
8 已采纳 2010-08-20 21:39:33
Use jQuery... 使用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"/>
You can create some ajax loading gifs here... http://www.ajaxload.info/ 你可以在这里创建一些ajax加载GIF ... http://www.ajaxload.info/
Add this CSS... 添加此CSS ...
#loading{position:fixed;top:50%;left:50%;z-index:1104;}
Update 更新
Replace with this JS code, leave the googlecode line. 替换为此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: HTML：
<div id="#info"></div>
<div id="#linechart"></div>
<div id="#piechart"></div>
Hope it helps. 希望能帮助到你。
解决方案2
1 2014-05-02 10:39:47
Use the following function: 使用以下功能：
<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
0 2010-08-20 21:34:03
Well, there are few issues on this path. 那么，这条路上几乎没有什么问题。
First of all, you output html to show loading screen, and run flush() command. 首先，输出html以显示加载屏幕，然后运行flush（）命令。 Ensure you do not have any gzip compression in php or apache, as content would not be sent to the browser. 确保您在php或apache中没有任何gzip压缩，因为内容不会发送到浏览器。
Then, you have to pray that browser would be smart enough to render it and not wait for xxx kb of data till next render. 然后，你必须祈祷浏览器足够智能以呈现它而不是等待xxx kb的数据直到下一次渲染。
Anyway, I would invest more time in optimization. 无论如何，我会投入更多时间进行优化。 Or do a light main page and do the rest of functionality via AJAX. 或者做一个轻量级主页并通过AJAX完成其余的功能。
解决方案4
0 2010-08-20 21:37:05
This is not actually php. 这实际上不是php。 But you can do as follows: 但你可以这样做：
Add the following to the head section: 将以下内容添加到head部分：
<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>
Change the <body> to <body onLoad="wait();"> 将<body>更改为<body onLoad="wait();">
and add the following in the beginning of body section: 并在正文部分的开头添加以下内容：
<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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.