0

我有一个 JSF 页面，上面有 8 张图片。

*仅适用于 jquery 查看器：请不要与 JSf 语法混淆。在幕后，它全部转换为纯 HTML。像 h:panelGrid 转换成表格元素。p:graphicImage 转换为 img 元素。实际上我想知道使用 jQuery ajax 加载图像的逻辑。就像使用 jQuery 一样，我调用服务器，然后从数据库中获取图像，当图像完全加载到路径上时，我更改 img src 属性以使用加载的图像更改默认图像。当页面在默认路径上加载时，会有一个默认图像，如 /resources/images/no-preview.jpg。所以我希望在加载图像时将其替换为 /resources/images/Image1.jpg、/resources/images/Image2.jpg 等 *。

<h:panelGrid columns="5" width="10%" style="position: relative; top: 50px; "
             columnClasses="asteriskColumns, nameColumns" >

    <h:outputText value="*" />
    <h:outputText value="Map: " />
    <p:fileUpload id="cityMap" widgetVar="uploader" description="Image"
                  update="city" allowTypes="*.jpg;*.png;*.gif;*.jpeg;"
                  auto="true" fileUploadListener="#{cityDetail.imageUpload}"
                  style="position: relative;"  >

    </p:fileUpload>

    <p:graphicImage id="city" value="#{cityDetail.imagePath}" width="80"
                    height="50" cache="false" style="position: relative;">

        <f:event type="preRenderComponent" listener="#{cityDetail.putImage}" />

    </p:graphicImage>

    <h:commandLink value="remove" title="Remove Picture"
                   style="color: #0d5b7f;text-decoration: underline;"
                   onclick="if (! confirm('Are you sure, you want to remove picture?') ) { return false;}; return true; ">

        <f:ajax event="click" render="city" listener="#{cityDetail.removeImage}"/>

    </h:commandLink>
    .....
    7 more images in same format

</h:panelGrid>

在构造函数中，我正在起诉这样的事情来从数据库中获取图像

public class CountryPages_Detail {
    private String imagePath = "/resources/images/no-preview.jpg";
    String path = externalContext.getRealPath("/resources/images") + "/" ;
    public CountryPages_Detail() {
        ....
        String cityMapQuery = "SELECT citymap From city Where cityid='" + cityID + "'";
        String countryMapFileName = "countryMap_" + saarcCountryId;
        // 7 more queries in same format

         ArrayList countryMapQueryArray = addCredentialsToList(externalContext, countryMapQuery, countryMapFileName, response);
         //7 more

         ArrayList mainArray = new ArrayList();
         mainArray.add(countryMapQueryArray);
         ...
         ArrayList result = ConnectionUtil.showImagesFormDatabase(mainArray);
    } //end of constructor     
} //end of class CountryPages_Detail

public static ArrayList showImagesFormDatabase(ArrayList list) {
    for (int i = 0; i < list.size(); i++) {
        ArrayList fileCredentialsList = ((ArrayList) list.get(i));
        String query = fileCredentialsList.get(0).toString();
        sqlStatement = conn.createStatement();
        resultSet = sqlStatement.executeQuery(query);
        if (resultSet != null) {
            while (resultSet.next()) {
                imageBytes = resultSet.getBytes(1);
                setResponceForDatabaseImages(fileCredentialsList);
                imageName = createFile(fileCredentialsList, imageBytes);
                if (imageName != null) {
                    imageNameList.add(imageName);
                }
            } //end of while()
        } //end of if()
    } //end of for()

    return imageNameList;

} //end of showImagesFormDatabase()

如您所见，我在页面加载时从数据库中获取图像。从数据库中获取图像字节，然后在该字节的路径上创建图像文件。但我有 8 张图片。如果任何图像尺寸很大，那么我必须等待，这令人沮丧。

我希望在页面加载时，而不是从数据库中加载图像，而是使用 ajax。意味着我的页面的其余部分会加载，图像会从幕后加载，当所有图像都加载后，就会显示在 p:graphicImage 中的图像。在加载图像时，加载图标应该显示在 p:grahicImage 中，当图像完全加载时，图标消失并且应该显示图像。

我该怎么做？

谢谢

编辑： - - - - - - - - - - - - - - - - - - - - - - - - ----------------------------------

 <ui:define name="content">
     <h:form id="faqAddUpdateForm" prependId="false">
         <h:panelGrid columns="5" width="10%" style="position: relative; top: 50px; "
             columnClasses="asteriskColumns, nameColumns" >
         ....
         </h:panelGrid>
     </h:form>

     <h:form id="hidden" style="display:none">
                <h:commandLink id="link">
                    <f:ajax event="click" listener="#{countryPages_Detail.loadImagesUsingAjax}" />
                </h:commandLink>
     </h:form>

     <script>
         window.onload = function() {
             document.getElementById('hidden:link').onclick();
          }
      </script>
 </ui:define>
4

1 回答 1

0

当文档准备好时，您可以加载图像。但是，h:bodyonload 不起作用（如BalusC 在此处的回答中所述）。

引用的答案将为您提供一种使其正常工作的方法。您需要触发一个commandLink附加了 ajax 侦听器的隐藏。侦听器应调用生成图像的方法，而 ajax 调用应更新包含图像的组件。

要在 ajax 调用中部分更新您的页面，请使用以下render属性f:ajax：

<h:commandLink id="link">
   <f:ajax event="click" 
           render=":faqAddUpdateForm"
           listener="#{countryPages_Detail.loadImagesUsingAjax}" />
</h:commandLink>

render=":faqAddUpdateForm"将呈现整个表单。如果这太多了，请给panelGroup包含图像的 id （例如“imageGroup”）并在render属性中使用此 id：

render=":faqAddUpdateForm:imageGroup"
于 2012-04-23T07:13:45.503 回答