等待数据时显示加载器答案

【问题标题】：Display loader while waiting for data等待数据时显示加载器
【发布时间】：2015-02-21 20:49:12
【问题描述】：

我有一个简单的基于 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 秒，然后将其淡出。

【问题讨论】：

#loading 的 CSS 是什么？
我想问题可能是背景图像没有及时加载，但我不确定。尝试将您的图像编码为 base64 数据 URI，看看它提供了什么。 websemantics.co.uk/online_tools/image_to_data_uri_convertor你也只是放一个红色背景，看看你是否看到元素。如果不是，那么您的问题出在其他地方...您最初是否将 #loading 元素隐藏在某个地方？

标签： javascript php jquery

【解决方案1】：

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

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

【讨论】：