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

【问题标题】：How can I make a JavaScript loading image show until a page finishes loading?如何在页面完成加载之前显示 JavaScript 加载图像？
【发布时间】：2014-08-26 07:42:12
【问题描述】：

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

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

【问题讨论】：

标签： javascript php html css

【解决方案1】：

使用 PHP，最快的方法是：

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

file_get_contents(YOUR_FILE);
ob_end_flush();
?>

【讨论】：

这对我没有帮助，文件 upload.php 会将数据插入数据库并将您重定向到另一个 url
请详细说明您的问题

【解决方案2】：

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

【讨论】：

【解决方案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();

})

【讨论】：