在没有 ajax 的情况下提交时显示动画进度加载 gif

【问题标题】：Show animated progress loading gif on submit without ajax在没有 ajax 的情况下提交时显示动画进度加载 gif
【发布时间】：2015-06-07 15:10:57
【问题描述】：

我想在单击按钮时显示进度条，并在操作完成并刷新/导航页面时将其删除。

我有一个h:panelGroup，我想在其中显示图片：

<h:panelGroup id="progress">
    some progress bar image
</h:panelGroup>

我的h:commandButton 在h:form 内：

<h:commandButton value="submit" action="#{bean.action}"  />

该操作运行良好，但我似乎无法弄清楚如何隐藏/显示进度条图像。我错过了什么？

【问题讨论】：

标签： jsf progress-bar

【解决方案1】：

所以，您基本上希望在浏览器将表单提交请求发送到服务器并等待其响应之前显示它。实现这一目标的唯一方法是使用 JavaScript 操作 HTML DOM 树。您可能已经知道，JSF 只是一个 HTML 代码生成器，所有的 webbrowser 都拥有 HTML DOM 树，JavaScript 在 webbrowser 中运行并且能够监听您可以在 a.o. 中指定的 UI 事件。 HTML 元素的 on* 属性。

给定一个

<img id="progressbar" src="progress.gif" style="display:none" />

您可以通过单击下面的命令按钮来显示它

<h:commandButton ... onclick="document.getElementById('progressbar').style.display='block'" />

一旦页面刷新，它将再次成为display:none。

另见：

【讨论】：