Question

我有一个带有一些相当繁重的服务器端功能的烧瓶应用程序，导致页面需要一段时间才能加载。我想要一个用户等待的几秒钟的加载图标。现在我面临的问题是，为此类事件列出的大多数解决方案都与等待页面内容加载而不是服务器端函数有关，所以他们只使用onload函数回家干了。

我有一个部分解决方案，但感觉非常hacky。想象一下，我有 Page 1 ，其中包含 Page 2 的链接。当点击链接时，它会触发烧瓶功能以检索，这是繁重工作的地方：

@app.route('/page2/')
def page_2:
    # do some heavy functions
    return render_template('page2.html')

目前，当点击 Page 2 的链接时，我有一些javascript会导致加载图标显示在 Page 1 上，这基本上可以完成作业。但是，当刷新时，或者直接通过webapp或其网址中的其他链接访问时，这不起作用。理想情况下，我想以某种方式导航到和然后等待功能完成，所以我总是可以在页面2上显示图标< /强>

在等待服务器端功能完成时，如何让页面显示加载图标？感谢。

Answer 1

尝试以下实施。

在所有网页中都有一个加载程序div。

<div class='loader'></div>

将默认CSS应用为：

.loader {
position: absolute;
top:0;
left:0;
right:0;
bottom: 0;
text-align: center;
margin: auto;
display: none
}

拥有displayLoader()功能，可将display的{{1}}属性更改为.loader。

使用hideLoader（）函数将block属性更改为display。

现在，假设您一旦发出调用或使用none调用beforeSend进行AJAX调用，并且AJAX调用的displayLoader()中的第一行启动致电success

在页面刷新时显示服务器端功能期间的加载图标

1 个答案: