Question

我的应用程序中有一个页面，它使用PrimeFaces DataTable显示第一列中每个人的小图像的人员列表。当用户单击作为p：commandLink一部分的小图像时，我使用ajax在p：对话框中更新p：graphicImage，其中包含所选图像的路径，并使用commandLink的oncomplete显示对话框。最后，我使用对话框的onShow将对话框置于页面中心。以下是xhtml：

timetable

上面的代码工作正常，但是对于列表中的小图像和对话框中的大图像使用单个图像文件。我决定为小图像和大图像使用不同的图像文件，因此创建了以下代码。

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

不幸的是，上面的代码并没有在用户第一次选择小图像时正确地将对话框置于页面中心。如果用户关闭对话框然后再次选择小图像，则对话框在页面上正确居中。我怀疑这与在对话框被显示之前没有完全下载的大图像有关，所以我给oncomplete添加了50ms的延迟，如下所示。

.
.
.
<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：对话框之前等待图像加载？

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

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

1 个答案: