在显示P对话框之前，您如何等待图像加载

Question

我的应用程序中有一个页面，该页面使用PrimeFaces DataTable显示了第一列中每个人的小图像的人列表。当用户单击是P：commandlink的一部分的小图像时，我使用Ajax在P：p：GraphIcimage中更新P：phagriCimage在P：对话框中，带有所选图像的路径，并使用CommandLink的oncomplete显示对话框。最后，我使用对话框的onshow将对话框集中在页面上。以下是XHTML：

.
.
.
<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>

不幸的是，上面的代码在用户第一次选择小图像时未正确将对话框置于页面上。如果用户关闭对话框，然后再次选择小图像，则对话框在页面上正确居中。我怀疑这与对话框外交之前没有完全下载的大图片有关。

<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：对话框之前，我该如何等待图像加载？

Answer 1

我通过将对话框显示从CommandLink的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