gif装载器居中作为顶层

Question

我有一个php表单。提交此表单后，如果所有数据都有效，则执行python脚本需要5-10秒。在这个等待期间，我希望在屏幕中间显示一个进度条（.gif）。如果我也可以“消失”背景，以便进度条像顶层，背景是背层，那就太棒了。

感谢。

Answer 1

您使用的是任何javascript库，例如jQuery吗？在任何一个库中，我都会想到会有十几个左右的灯箱插件浮动。即使您不想使用库，也可以查看他们的代码，而不是显示DIV，只需显示您的gif，如果您知道我的意思。

甚至还有一些专门为此目的而构建的插件，例如jQuery的BlockUI插件。

---

执行所需操作的基本算法如下：

1. 启动Ajax请求
2. 在整个页面上显示半透明的暗图像，中间有一个GIF动画。
3. 倾听Ajax回复
4. 删除叠加层和装载机gif。

我假设您已经完成了第1步和第3步。第4步很容易。然而，步骤2并不容易，但仍然不应该太难。我不能告诉你自己做的代码，因为我过去只使用过lightbox插件。看看谷歌上的“简单灯箱”或类似的东西，因为你真正想要的只是最基本的功能。这篇博客文章讨论了a CSS-only lightbox，这将是一个很好的起点，可以帮助你设计叠加层。