如何在页面未完全加载时显示加载gif

Question

所以我有一个名为generate_schedule.php的页面，在这个页面中，我有一个表单，用户可以从两个下拉菜单中选择并点击提交（见下图）：

此表单POST是另一个名为generate.php的php的开始日期和结束日期。 加载generate.php大约需要1-2分钟，因为它会从多个API中提取大量信息。在页面加载时我想显示加载gif。目前我有以下代码用于加载下一页：

<div class="se-pre-con"></div>
<style type="text/css">
.no-js #loader { display: none;  }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url(images/loading.gif) center no-repeat #fff;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.js"></script>
<script type="text/javascript">
    $(window).load(function() {
        $(".se-pre-con").fadeOut();
    });
</script>

然而，这个问题是它只在generate.php完全加载几秒后出现。我也试过

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script language="javascript" type="text/javascript">
     $(window).load(function() {
     $('.se-pre-con').hide();
  });
</script>

但这不起作用，只有在generate.php页面完全加载

后，它才会显示为一秒钟

基本上我想要发生的是当我点击generate_schedule.php中的生成计划时，加载generate.php时出现加载gif

Answer 1

在generate.php几乎被加载之前，gif没有显示的原因是因为当您单击提交按钮时，表单将提交给generate.php并且您不久就会{{1} }}。但内容加载需要很长时间，因此浏览器此刻更喜欢显示generate_schedule.php内容，而不是显示空白页。

一般方法是将加载程序放在generate_schedule.php页面上而不是generate_schedule.php上。单击按钮后首先显示加载器，然后提交表单，然后页面将继续加载内容，同时显示加载器gif。

所以这是我通常做的事情： 1.在generate.php上添加隐藏元素，如：

generate_schedule.php

与css一样（假设图像宽度为60px，高度为40px）：

<div id="loading"><img src="loading.gif" /></div>

基本上将加载程序从#loading{ position: fixed, top: 0; left: 0; width: 100%; height:100%; background-color: rgba(255, 255, 255, 0.6); z-index: 1000; display:none; } #loading img{ position: absolute; left: 50%; top: 50%; margin-top: -20px; margin-left: -30px; } 移动到generate.php。 然后在generate_schedule.php添加javascript为：

generate_schedule.php