p : 대화 상자를 표시하기 전에 이미지가로드 될 때까지 어떻게 기다립니까?

첫 번째 열에 각 사람의 작은 이미지가있는 사람 목록을 표시하는 데 PrimeFaces DataTable을 사용하는 응용 프로그램 페이지가 있습니다. 사용자가 p : commandLink의 일부인 작은 이미지를 클릭하면 ajax를 사용하여 p : 대화 상자의 p : graphicImage를 선택한 이미지의 경로로 업데이트하고 commandLink의 oncomplete를 사용하여 대화 상자를 표시합니다. 마지막으로, 대화 상자의 onShow를 사용하여 페이지의 대화 상자를 중앙에 배치합니다. 다음은 XHTML입니다 :p : 대화 상자를 표시하기 전에 이미지가로드 될 때까지 어떻게 기다립니까?

는

. 
. 
. 
<p:commandLink 
    update="portrait" 
    oncomplete="PF('portrait-dialog').show());"> 
    <f:setPropertyActionListener 
     value="#{portrait}" 
     target="#{portraits.portrait}" /> 
    <p:graphicImage 
     value="/files#{portrait.path}" 
     style="height: 192px; width: auto;" /> 
</p:commandLink> 
. 
. 
. 
<p:dialog 
    id="portrait-dialog" 
    showHeader="false" 
    widgetVar="portrait-dialog" 
    modal="true" 
    responsive="true" 
    onShow="positionDialog('portrait-dialog')"> 
    <p:graphicImage 
     id="portrait" 
     style="max-height: 85vh;" 
     value="/files#{portraits.portrait.path}" 
     onclick="PF('portrait-dialog').hide();" /> 
</p:dialog>

위의 코드는 완벽하게 작동하지만, 목록에서 작은 이미지와 대화에서 큰 이미지를 하나의 이미지 파일을 사용합니다. 작고 큰 이미지에 다른 이미지 파일을 사용하기로 결정하여 다음 코드를 만들었습니다.

. 
. 
. 
<p:commandLink 
    update="portrait" 
    oncomplete="PF('portrait-dialog').show();"> 
    <f:setPropertyActionListener 
     value="#{portrait}" 
     target="#{portraits.portrait}" /> 
    <p:graphicImage 
     value="/files#{portrait.getPath('_162x288.jpg')}" 
     style="height: 192px; width: auto;" /> 
</p:commandLink> 
. 
. 
. 
<p:dialog 
    id="portrait-dialog" 
    showHeader="false" 
    widgetVar="portrait-dialog" 
    modal="true" 
    responsive="true" 
    onShow="positionDialog('portrait-dialog')"> 
    <p:graphicImage 
     id="portrait" 
     style="max-height: 85vh;" 
     value="/files#{portraits.portrait.getPath('_810x1440.jpg')}" 
     onclick="PF('portrait-dialog').hide();" /> 
</p:dialog>

불행하게도, 위의 코드를 올바르게 페이지에서 사용자가 작은 이미지를 선택 처음 대화를 중심으로하지 않습니다. 사용자가 대화 상자를 닫은 다음 작은 이미지를 다시 선택하면 대화 상자가 페이지의 가운데에 올바르게 표시됩니다. 대화 상자가 표시되기 전에 큰 이미지가 완전히 다운로드되지 않는 것과 관련이 있다고 생각하여 아래에 표시된대로 50ms 지연을 추가합니다.

<p:commandLink 
    update="portrait" 
    oncomplete="setTimeout(function(){PF('portrait-dialog').show();}, 50);"> 
    <f:setPropertyActionListener 
     value="#{portrait}" 
     target="#{portraits.portrait}" /> 
    <p:graphicImage 
     value="/files#{portrait.getPath('_162x288.jpg')}" 
     style="height: 192px; width: auto;" /> 
</p:commandLink>

이 방법으로 대부분의 경우 문제가 해결되었지만 대화 상자가 첫 번째 선택에서 올바르게 가운데 맞춤되지 않는 경우가 있습니다.

p : 대화 상자를 표시하기 전에 이미지가로드 될 때까지 기다리는 방법은 무엇입니까?

출처

2017-11-22 Reed Elliott

다음과 같이 명령 줄의 oncomplete에서 대화 상자의 imageGraphic의 onload passthrough 속성으로 대화 쇼를 이동하여이 문제를 해결했습니다.

. 
. 
. 
<p:commandLink 
    update="portrait" 
    oncomplete=""> 
    <f:setPropertyActionListener 
     value="#{portrait}" 
     target="#{portraits.portrait}" /> 
    <p:graphicImage 
     value="/files#{portrait.getPath('_162x288.jpg')}" 
     style="height: 192px; width: auto;" /> 
</p:commandLink> 
. 
. 
. 
<p:dialog 
    id="portrait-dialog" 
    showHeader="false" 
    widgetVar="portrait-dialog" 
    modal="true" 
    responsive="true" 
    onShow="positionDialog('portrait-dialog')"> 
    <p:graphicImage 
     id="portrait" 
     style="max-height: 85vh;" 
     a:onload="PF('portrait-dialog').show();" 
     value="/files#{portraits.portrait.getPath('_810x1440.jpg')}" 
     onclick="PF('portrait-dialog').hide();" /> 
</p:dialog>

내 대화 상자가 표시되고 센터링되기 전에 이미지 파일이 다운로드 될 때까지 기다렸다가 모두 정상입니다.

다음은 PrimeFaces 포럼의 저의 원래 질문에 대한 링크입니다.

https://forum.primefaces.org/viewtopic.php?f=3&t=53248

출처

2017-11-22 09:03:03

p : 대화 상자를 표시하기 전에 이미지가로드 될 때까지 어떻게 기다립니까?

답변

관련 문제