等待数据时显示加载器

Question

我有一个简单的基于php的网站，可以查询其他网站的一些数据。我需要显示一些加载图像，同时处理数据。

我尝试跟踪，但加载程序只显示了片刻，一旦页面加载并淡出。

<script>
    $(window).load(function() {
        $("#loading").fadeOut("slow");
    });
</script>

html

<div id="loading"></div>

css

#loading {
    z-index: 100;
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0px;
    top: 0px;
    background: url('img/loading.gif') 50% 50% no-repeat;
}

为了更好地解释发生了什么以及我需要什么，假设页面的加载时间是10秒。现在页面加载10秒，不显示加载器，10秒后显示加载器淡出。我需要显示装载器整整10秒，然后淡出它。

Answer 1

发生这种情况是因为在PHP发送响应之前，您的页面甚至都不会开始加载。并且它将仅在完成所有查询的10秒后发送响应。您应该做的是创建一个静态页面，它首先(快速)加载自身，然后通过AJAX单独调用PHP脚本。您可以在调用期间显示加载器。

您还可以在执行任何缓慢的查询之前，尝试关闭PHP输出缓冲，并发送(回显)包含加载器的页面部分。