Question

如何在页面完成加载之前显示JavaScript加载图片？

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

Answer 1

使用PHP，最快的方法是：

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

file_get_contents(YOUR_FILE);
ob_end_flush();
?>

Answer 2

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

Answer 3

<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();

})

如何在页面完成加载之前创建JavaScript加载图像？

3 个答案: