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

Question

我有一个 flask 应用程序，它有一些相当繁重的服务器端功能，导致页面加载需要一段时间。我想要在用户等待的几秒钟内显示一个加载图标。现在我面临的问题是，针对此类事情列出的大多数解决方案都与等待页面 content 加载有关，而不是服务器端函数，因此它们只使用 onload 函数回家干爽。

我有一个部分解决方案，但感觉很老套。假设我有一个 Page 1，其中有一个指向 Page 2 的链接。单击链接时，它会触发 flask 函数以检索 Page 2，这是完成繁重工作的地方:

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

目前，我有一些 javascript 可以在单击指向 Page 2 的链接时在 Page 1 上显示加载图标，这基本上可以完成工作。但是，当 Page 2 刷新时，或者当它被 webapp 中的另一个链接或其 url 直接访问时，这不起作用。理想情况下，我想以某种方式导航到 Page 2 并然后等待功能完成，这样我就可以始终在 Page 2< 上显示图标/strong>.

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

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 的函数.loader的属性(property)至 block .

有一个 hideLoader() 函数可以改变 display属性(property)none .

现在，假设您正在发起一个 AJAX 调用，一旦调用被触发或使用 beforeSend调用displayLoader() ，以及 success 中的第一行您的 AJAX 调用发起对 hideLoader() 的调用