在完全加载页面之前，加载栏隐藏在 jsf 中

Question

>实际上我正在获取加载栏，但在加载页面内容之前，加载栏被隐藏。我想要加载栏，直到页面未正确加载。

下面是我在布局中使用的代码.xhtml

 <li class="#{loginBean.subMenu eq 'Booking_History' ? 'active' : ''}">
          <p:commandLink rendered="#{loginBean.logedadmin or loginBean.logedagent}" action="#{bookingHistoryBean.showList}" value="Booking History"
                        immediate="true">
                        </p:commandLink>

爪哇方法

public String showList() {
    startLoadingBar();
    status="All";
    noOfRecords=0;
    getList();
    searchBookingHistory();
    log.info("Loaded successfully");
    return "/pages/internalstackholders/bookinghistory.jsf?faces-redirect=true";
}

在预订历史记录中.xhtml

 <p:dialog widgetVar="statusDialog" id="statusbar" modal="true"
        showEffect="fade" showHeader="false" closable="false" width="250"
        resizable="false">
    <h:form>
      <center>
        <img src="#{request.contextPath}/resources/images/loading.gif" /><br />
        <b>Please wait...</b><br />
        <br />
      </center>
    </h:form>
  </p:dialog>

任何机构有任何建议。

Answer 1

你可以试试下面的代码，它对我有用onclick="statusDialog.start((" and oncomplete="statusDialog.close((">

    <p:commandButton rendered="#{loginBean.logedadmin or loginBean.logedagent}" action="#{bookingHistoryBean.showList}" value="Booking History" immediate="true" async="true" onclick="statusDialog.start()" oncomplete="statusDialog.close()" />
<p:dialog widgetVar="statusDialog" id="statusbar" modal="true"
    showEffect="fade" showHeader="false" closable="false" width="250"
    resizable="false">
<h:form>
  <center>
    <img src="#{request.contextPath}/resources/images/loading.gif" /><br />
    <b>Please wait...</b><br />
    <br />
  </center>
</h:form>

Answer 2

我已经找到了答案。

在布局中.xhtml我在正文中添加了以下代码。

<div id="nonAjaxLoad">
    <img src="#{request.contextPath}/resources/images/loading.gif"/>
</div>

然后我添加了脚本代码。

<script>
$(document).ready(function(){
    console.log("ready is called");
    //PF('statusDialog').hide()
    $('#nonAjaxLoad').hide();
});
$(window).bind('beforeunload', function() {
     console.log("bind is called");
    // PF('statusDialog').show()
    $('#nonAjaxLoad').show(); 
});
</script>

我已经添加了 css

#nonAjaxLoad {
width: 50px;
height: 50px;
position:absolute;
bottom: 50%;
right: 50%;
z-index: 999
}

现在加载栏工作正常。我从这里得到了帮助。