jsf - 如何在图像加载期间显示 .gif 或消息？

Question

我有一个动态加载图像的 jsf 页面。图像生成可能需要几秒钟，所以我想显示一条消息或 gif，以便用户知道正在加载某些内容（目前加载过程中只有一个空白区域）。

我曾尝试使用 primeface 的延迟加载，但它根本没有任何区别。

我的页面中有一个 ajaxStatus，但在加载过程中没有激活它。

这是包含图形图像的代码：

            <p:outputPanel deferred="true">
                <h:graphicImage
                    value="/wfDiagram?processId=#{workflowAction.processId}"/>
            </p:outputPanel>

value指向处理图像生成的 servlet 。

Answer 1

您应该尝试 primefacesp:blockUI组件。
下面是一些例子：

<p:blockUI widgetVar="loading" trigger="btnFilterProgram" block=":layout">
    <h:panelGrid styleClass="custom-painelgrid-center">
        <h:outputText value="Loading" />
        <p:graphicImage value="resources/img/loading.gif" />
    </h:panelGrid>
</p:blockUI>

在这种情况下，当用户单击带有 id 的按钮时会打开一种“弹出对话框”，btnFilterProgram并且在 AJAX 请求完成后组件会自行关闭。