Primefaces 时间轴在更新时闪烁

Question

更新时 Primefaces 时间线闪烁。这是非常不美观的旧版本在更新时没有闪烁。如果您单击 primefaces 展示柜中的按钮，您可以看到它的外观：

https://www.primefaces.org/showcase/ui/data/timeline/editServer.xhtml?jfwid=0a833

        <p:timeline id="timeline" value="#{editServerTimelineView.model}" var="booking"
                zoomMax="#{editServerTimelineView.zoomMax}"
                start="#{editServerTimelineView.start}"
                end="#{editServerTimelineView.end}"
                editable="true" editableTime="#{editServerTimelineView.editableTime}"
                widgetVar="timelineWdgt">


        <p:commandButton value="Toggle TimeChangeable" process="@this" update="timeline" 
                     action="#{editServerTimelineView.toggleEditableTime}"/>

每当您更新时间线时都会发生同样的事情。

你知道如何防止时间轴闪烁吗？

Answer 1

是的，新时间轴在渲染时做了更多工作，并且有很多新功能，但这是副作用。他们提供加载屏幕模板，让您的用户知道它正在加载......

<f:facet name="loading">
   <h1>Loading please wait...</h1>
</f:facet>

Answer 2

在我的例子中，更新时闪烁发生在延迟加载和新项目中。这是可能的，而且不是因为做了更多的工作。这是一个设计决定，dom 对象可见性的改变，在加载 loadingScreen 之前在 js 中渲染组件时，您可以看到：

p.dom.root.style.visibility = "hidden";

猴子修补 timeline.js 并更改为

p.dom.root.style.visibility = "visible";

问题消失。

Primefaces 时间轴在更新时闪烁

Primefaces timeline blink on update

jsf

primefaces