如何使用Ajax更新图形图像而不闪烁?
请看下表。特别要注意ajax和graphicImage元素。ajax元素嵌入在selectOneMenu中。更改菜单选择时,图像将相应更新。更新有时会导致“闪烁”(旧图像消失,窗体调整大小(收缩),出现新图像,窗体恢复到原始大小)。我猜不闪烁(blink)是由于从url(web上其他地方的服务器)获取新图像的速度(或缺乏速度)造成的。除了在本地缓存所有图像之外,有没有办法解决这个问题?使旧映像保持在原来的位置,直到新映像准备就绪?至少要防止窗体调整大小如何使用Ajax更新图形图像而不闪烁?,ajax,jsf-2,Ajax,Jsf 2,请看下表。特别要注意ajax和graphicImage元素。ajax元素嵌入在selectOneMenu中。更改菜单选择时,图像将相应更新。更新有时会导致“闪烁”(旧图像消失,窗体调整大小(收缩),出现新图像,窗体恢复到原始大小)。我猜不闪烁(blink)是由于从url(web上其他地方的服务器)获取新图像的速度(或缺乏速度)造成的。除了在本地缓存所有图像之外,有没有办法解决这个问题?使旧映像保持在原来的位置,直到新映像准备就绪?至少要防止窗体调整大小 <h:form rendered="
<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=" " />
</h:form>
新秩序
您可以将onevent
属性绑定到ajax标记:
<f:ajax render="productImage" listener="#{orderController.productSelectionChanged}"
onevent="ajaxEventListener"/>
为了缩短加载时间,您应该阅读一些关于如何在web浏览器中缓存资源的文章。不过,这不是JSF特有的,这是您可以做的
另请参见:
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;
}
}