在显示 p:dialog 之前如何等待图像加载？答案

【问题标题】：How do you wait for an image to load before displaying a p:dialog?在显示 p:dialog 之前如何等待图像加载？
【发布时间】：2017-11-22 08:53:26
【问题描述】：

我的应用程序中有一个页面，它使用 PrimeFaces 数据表来显示人员列表，第一列中每个人都有一个小图像。当用户单击作为 p:commandLink 一部分的小图像时，我使用 ajax 将 p:dialog 中的 p:graphicImage 更新为所选图像的路径，并使用 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>

很遗憾，当用户第一次选择小图像时，上面的代码无法正确地将对话框置于页面中心。如果用户关闭对话框然后再次选择小图像，则对话框在页面上正确居中。我怀疑这与在显示对话框之前未完全下载大图像有关，因此我在 oncomplete 中添加了 50 毫秒的延迟，如下所示。

<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:dialog 之前等待图像加载？

【问题讨论】：

标签： jsf primefaces

【解决方案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

【讨论】：