Как я могу использовать Ajax для обновления GraphicImage, не мигая?

Question

Пожалуйста, посмотрите на следующую форму. В частности, обратите внимание на элементы ajax и graphicImage. Элемент ajax встроен в selectOneMenu. Когда выбор меню изменяется, изображение соответственно обновляется. Обновление иногда вызывает «мерцание» (старое изображение исчезает, форма изменяется (сжимается), появляется новое изображение, форма возвращается к исходному размеру). Я предполагаю, что не мигание (мигание) является результатом скорости (или отсутствия таковой), с которой новое изображение извлекается из URL-адреса (сервер в другом месте в Интернете). Если не считать кэширование всех изображений локально, есть ли способ решить эту проблему? Заставить старое изображение оставаться на месте, пока новое изображение не будет готово? По крайней мере, помешать изменению размера формы?

<h:form rendered="#{orderController.addingNew}" styleClass="demo">
    <fieldset>
        <legend>New Order</legend>

        <h:panelGrid columns="2">
            <h:outputText value="Patient"></h:outputText>
            <h:selectOneMenu validatorMessage="required" value="#{orderController.patientId}"  onchange="submit()">
                <f:selectItems value="#{orderController.patients}" />
            </h:selectOneMenu>

            <h:outputText value="Product"></h:outputText>
            <h:selectOneMenu value="#{orderController.productId}">
                <f:selectItems value="#{orderController.products}" var="product" itemValue="#{product.id}" itemLabel="#{product.name}" />
                <f:ajax render="productImage" listener="#{orderController.productSelectionChanged}"/>
            </h:selectOneMenu>

            <h:graphicImage url="#{orderController.productImageUrl}" id="productImage"/>
        </h:panelGrid>

        <h:panelGroup>
            <h:commandButton value="Save" action="#{orderController.save}" accesskey="s" styleClass="demo"/>
            <h:commandButton value="Cancel" action="#{orderController.cancel}" accesskey="c" immediate="true" styleClass="demo"/>
        </h:panelGroup>
    </fieldset>
    <h:outputText value="&#160;" />
</h:form>

Answer 1

Вы можете привязать атрибут onevent к вашему тегу ajax:

<f:ajax render="productImage" listener="#{orderController.productSelectionChanged}" 
    onevent="ajaxEventListener"/>

Затем вы получаете уведомление, когда происходит какая-то фаза процесса ajax. Возможно, вам будет интересно реализовать что-то подобное с помощью jQuery:

function ajaxEventListener(data) {
    var status = data.status; // Can be "begin", "complete" or "success".
    var source = data.source; // The parent HTML DOM element.
    //Give your form an id in order to access the image in JS
    var $image = $(document.getElementById("yourFormId:productImage"));  //Grab your image

    switch (status) {
        case "begin": // Before the ajax request is sent.
            // Fade out your image
            $image.fadeOut( "slow" );
            break;

        case "success": // After update of HTML DOM based on ajax response.
            // You've got the url properly updated, start fading in the image again
            $image.fadeIn( "slow" );
            break;
    }
}

Чтобы сократить время загрузки, вам следует прочитать некоторые статьи о том, как кэшировать ресурсы в веб-браузере. Это не специфично для JSF, это то, что вы могли бы сделать с веб-фильтром .

Смотри также:

• Выполнить JavaScript до и после вызова прослушивателя f: ajax
• Как выбрать компоненты JSF с помощью jQuery?
• http://api.jquery.com/fadeout/
• http://api.jquery.com/fadeIn/