javascript - 如何在页面未完全加载时显示正在加载的 gif

Question

所以我有一个名为 generate_schedule.php 的页面，在这个页面中我有一个表单，用户可以在其中从两个下拉列表中进行选择并单击提交(见下图):

此表单将开始日期和结束日期发布到另一个名为 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>

然而，这个 doe 只在 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

gif 直到 generate.php 几乎加载完毕才显示的原因是因为当您单击提交按钮时，表单被提交到 generate.php并且您不再位于 generate_schedule.php 上。但是内容需要很长时间才能加载，因此浏览器更愿意此时显示 generate_schedule.php 内容，而不是显示空白页面。

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

所以这是我通常做的事情:1. 在 generate_schedule.php 上添加一个隐藏元素，例如:

<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();
});