PF BlockUI - 在完成后保持 gif 动画

【问题标题】：PF BlockUI - keep gif animating after oncompletePF BlockUI - 在完成后保持 gif 动画
【发布时间】：2015-05-21 03:21:54
【问题描述】：

我有一个命令按钮，它重定向到带有表单的页面。在 commandButton 操作上，我调用了一个方法，该方法从数据库加载数据以填写此表单，并重定向到它的页面。加载大约需要 5-10 秒。
在 commandButton onstart 方法上，我在 blockUI 上调用 show()，如果我在 oncomplete 发生时调用 hide()，它会在数据加载操作和页面重定向之前隐藏动画 gif，因此它没有用。此外，当我决定不调用 hide 时，我可以在数据加载时看到它，它会在 ajax 完成时停止动画（我猜）。
如何在数据加载期间使 gif 动画？

【问题讨论】：

嗨，请参阅 How to Ask... 显示您拥有的代码，以便我们对此进行评论，而不是“猜测”或为您编写完整的解决方案。

标签： ajax animation primefaces blockui

【解决方案1】：

我尝试使用带有 h:graphicImage 内容的 blockUI 来显示加载器。

<p:blockUI id="blockUI" block="contentToBlock" widgetVar="loader">
    LOADING<br/>
    <h:graphicImage library="images/" name="loader.gif" height="60px" width="60px"/>
</p:blockUI>

在这种情况下，在重定向到另一个页面之前，gif 在 ajax 请求完成后停止动画，并在数据加载期间冻结。

<p:commandButton value="Redirect" id="someID" ajax="false" 
                        onclick="PF('loader').show()" 
                        action="#{redirectToNextPageAndLoadDataAction()}"/>

使用 ajax=false 与 onclick 配合使用，可以按我的意愿工作，在页面重定向之前可以看到动画 gif，虽然我从来没有这样隐藏它，所以当你使用浏览器返回上一页时， gif 还是在那里打开的，而且 UI 被屏蔽了，不太好，但我正在努力。

更新：最后一个错误只发生在 Firefox 中

【讨论】：