Question

我有一个网站，其中一些页面运行许多php例程，有时可能需要一些时间。例如，从一个页面有一个表单：

.pp_description {
    margin-top: 3em;
    margin-bottom: 2em;
    /* line-height: 3em; if you want spacing between each line of text in the caption */
}

假设目标页面是：

<form action ="showdata.php">
    <input type="submit">
</form>

我已经尝试在目标页面上放置一个加载gif，但只有在我怀疑查询完成后才会加载。为此，我在目标页面上有以下内容：

CSS

connecting to a MySQL database
performing a series of select queries to establish the data to display 
preparing the resulting page with data displayed.

SCRIPT

.loader {
top: 50%;
left: 50%;
width:6em;
height:6em;
margin-top: -3em; 
margin-left: -3em;
border: 0px solid #ccc;
background-color: #f3f3f3;
position:fixed;
background: url('../images/page-loader.gif') no-repeat;
}

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function() {
    $(".loader").fadeOut("slow");
})
</script>

如何才能正确显示加载gif？选择页面后立即IE。我似乎记得读过你可以使用显示gif的中间页面来解决这个问题，然后重定向到目标页面。这是解决这个问题的好方法还是有更好的方法？

Answer 1

您要做的是使用表单向页面添加加载gif，并在单击按钮时显示它。目标页面只会在服务器端的php内容被处理后立即加载，因此一旦点击就会显示加载栏，可能会显示您正在寻找的结果。

例如：

<script type="text/javascript">
$('.submit').on('click', function() {
    $(".loader").fadeIn("slow");
})
</script>

在页面加载时加载gif

1 个答案: