gif 加载器作为顶层居中

Question

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

谢谢。

Answer 1

您是否使用任何 javascript 库，例如 jQuery？我想在任何一个库中都会有十几个灯箱插件。即使你不想使用库，你也可以看一下他们的代码，而不是显示 DIV，只需显示你的 gif，如果你明白我的意思的话。

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

---

做你想做的事情的基本算法如下：

1. 启动 Ajax 请求
2. 在整个页面上显示半透明的深色图像，中间有一个动画 gif。
3. 监听 Ajax 响应
4. 删除覆盖层和加载器 gif。

我假设您已经完成了步骤 1 和 3。第 4 步很简单。然而，第 2 步并不那么容易，但仍然不会太难。我无法告诉您自己执行此操作的代码，因为我过去只使用过灯箱插件。看看谷歌上的“简单灯箱”或类似的东西，因为你真正想要的只是最基本的功能。这篇博文讨论了 纯 CSS 灯箱 这将是帮助您设置叠加层样式的良好起点。