我如何使一个JavaScript加载图像显示,直到页面完成加载


How can I make a JavaScript loading image show until a page finishes loading?

如何使JavaScript加载图像显示,直到页面完成加载?

我正在开发在线防病毒扫描程序。我想让JavaScript显示一个加载图像,直到文件被上传,API已经完成扫描。我有两个文件:index.html只有一个HTML上传表单,而upload.php执行file_get_contents(大约需要10秒)并从API接收数据。

使用PHP,最快的方法是:

<?php
ob_start();
?>
<img src="load.gif" /> 
<?php
ob_flush();
flush();
file_get_contents(YOUR_FILE);
ob_end_flush();
?>

也许你应该尝试使用ajax加载,所以基本上,你隐藏了所有的html内容,然后如果页面完成加载,你隐藏了'加载图像',然后取消隐藏的html

<style type="text/css">
#loading
{
 position:fixed;
 top:-50%;
 left:-50%;
 width:200%;
 height:200%;
 background:#fff;
 z-index:100;
 overflow:hidden
}
 #loading img
{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto}
</style>

在body标签

之后使用下面的div
<div id="loading"><img src="img/ajax-loader.gif"></div>

然后,@脚本就绪函数,

$(document).ready(function() {
   $("#loading").fadeOut();
})