在显示p：对话框之前如何等待图像加载？

Question

我的应用程序中有一个页面，它使用PrimeFaces DataTable来显示人员列表，其中第一列中每个人的小图像。当用户单击作为p：命令链接一部分的小图像时，我使用ajax在p：对话框中更新p： graph icImage，其中包含所选图像的路径，并使用命令链接的完整显示对话框。最后，我使用对话框的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>

不幸的是，上面的代码在用户第一次选择小图像时没有正确地将对话框居中放置在页面上。如果用户关闭对话框，然后再次选择小图像，则对话框在页面上正确居中。我怀疑这与在显示对话框之前没有完全下载大图像有关，因此我在oncomplete中添加了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：对话框之前等待图像加载？

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