在 Flask 中显示加载/启动页面答案

【问题标题】：Display loading/splash page in Flask在 Flask 中显示加载/启动页面
【发布时间】：2014-02-27 07:18:07
【问题描述】：

我有一个显示单页内容的烧瓶应用程序，但生成内容最多需要 20 秒。在我看来，显示初始屏幕的一种方法是让主 URL 端点显示一个页面，上面写着“正在加载，请稍候......”，然后重定向到加载带有实际内容的 url 端点的页面。

但是我看不出如何使它工作。如果我只是写一个 JS 来重定向到内容，原来的页面会立即消失，所以你根本看不到它。如何触发内容的 ld，同时确保加载屏幕保持不变，直到内容页面完成加载？

我已经广泛搜索了这个问题的答案，但没有一个现有的 Q/As 实际上显示如何解决这个问题。

【问题讨论】：

stackoverflow.com/questions/11072759/…
很遗憾，我没有可用的 JQuery。

【解决方案1】：

我已经实现了类似于以下 SO Q/A 中的解决方案，它建议在通过 JQuery 显示的 div 中使用加载图像：Display a ‘loading’ message while a time consuming function is executed in Flask

另外，例如 JQuery：http://gioorgi.com/2011/loading-image/

为了将来参考，你能显示一些代码吗？如果我能看到一些 @app.routes 和 html 模板，解释解决方案会更容易。

【讨论】：

我工作的环境中没有可用的 JQuery。
啊，那我不确定。 JQuery 是我成功的门票。
难道没有纯 Pythonic 的东西吗，我的意思是只有我可以在 Flask 中实现的功能？
@arshpreet 你的意思是用纯python代码实现加载图像吗？我建议让框架加载 gif 而不是编写 Python 代码来创建动画图像。顺便说一下，这是另一个链接：realpython.com/blog/python/flask-by-example-updating-the-ui/…

【解决方案2】：

我为 POST 页面实现了类似的东西。 GET 页面可能需要不同的策略。

在为 POST 请求生成表单的模板中：

<div id="splash" style="display: none; z-index: 10; position:fixed">It might take up to 10 seconds to complete all the complicate calculation...</div>

<form method="post"  onsubmit="let x = document.getElementById('splash'); x.style.display = 'block';">
...
</form>

这个想法是在客户端（浏览器）显示启动页面，在用户单击“提交”按钮后，服务器在后台收到 POST 消息并工作生成新页面并将其发送回完成后立即浏览浏览器。

【讨论】：