如何在页面未完全加载时显示加载 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，而您不再在generate_schedule.php 上。但是内容会需要很长时间才能加载，所以浏览器现在更喜欢显示generate_schedule.php的内容，而不是显示空白页面。

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

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

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

与css类似（假设图像是60px宽和40px高）：

#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。 然后在generate_schedule.php 上添加 javascript 为：

$('#submitBtn').on('click', function(e){
    e.preventDefault();//prevent the form submit
    e.stopPropagation();// stop propagation
    $('#loading').show();
    $('#form').submit();
});