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

【问题标题】：How to show a .gif or message during image loading?如何在图像加载期间显示 .gif 或消息？
【发布时间】：2013-11-26 13:31:39
【问题描述】：

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

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

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

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

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

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

【问题讨论】：

标签： jsf primefaces

【解决方案1】：

您应该尝试使用 primefaces p: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 请求完成后组件会自行关闭。

【讨论】：

鲁道夫，这行不通。图片在页面加载时显示，因此没有任何 ajax 调用。