Как показать .gif или сообщение во время загрузки изображения?

Question

У меня есть страница jsf, которая загружает изображение динамически. Генерация изображения может занять несколько секунд, поэтому я хочу отобразить сообщение или gif, чтобы пользователь знал, что что-то загружается (на данный момент во время загрузки есть только пустое место).

Я попытался использовать отложенную загрузку по умолчанию, но это не имело никакого значения.

У меня есть ajaxStatus на моей странице, но он не активируется во время загрузки.

Вот код, содержащий graphicImage:

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

value указывает на сервлет, который обрабатывает генерацию изображения.

Answer 1

Вы должны попробовать компоненты 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> 

В этом случае, своего рода «появившемся диалоговом окне» открывается, когда пользователь нажимает на кнопку с идентификатором btnFilterProgram и компонент закрывает себя после того, как запрос AJAX завершен.