Javascript 页面加载时显示图片
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3535020/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show image while page is loading
提问by Scorpion King
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?
我的网页同时使用了一些 api，页面加载的总处理时间约为 8 秒。我想在页面加载时显示页面加载图像。可能就像整个页面变暗并显示一个图像，它代表页面加载，一旦页面加载，我想回到我的页面。如何在 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. As soon as the link is changing, the webpage is loaded, so any solution or reason why this is happening?
更多信息：在页面中的所有可视化完全加载之前，页面甚至不会加载。换句话说，一旦点击链接，页面的 URL 甚至不会改变。一旦链接发生变化，网页就会被加载，所以有什么解决方案或原因吗？
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...
我实际上是使用 GAPI 类来获取 Google 分析提要并使用 google 可视化 javascript api 来显示图像。我对不同的数据参数调用使用多个 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);
$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 可视化 api。
Each of this is stored in seperate files and i am calling them using include ();
每个都存储在单独的文件中，我使用 include () 调用它们；
回答by Dejan Marjanovic
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.
希望能帮助到你。
回答by Amit bindal
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>
回答by BarsMonster
Well, there are few issues on this path.
好吧，这条道路上几乎没有问题。
First of all, you output html to show loading screen, and run flush() command. Ensure you do not have any gzip compression in php or apache, as content would not be sent to the browser.
首先，您输出 html 以显示加载屏幕，然后运行 flush() 命令。确保您在 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 完成其余的功能。
回答by Aman
This is not actually php. But you can do as follows:
这实际上不是 php。但您可以按以下方式操作：
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>
