所以我有一个名为 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
最佳答案
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();
});
关于javascript - 如何在页面未完全加载时显示正在加载的 gif,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36275493/