Question

我有一个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()

正如您所看到的，我在页面加载时从数据库中获取图像。从数据库中获取图像字节，然后在该字节的路径上创建imagefile。但我有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>

Answer 1

当文档准备就绪时，您可以加载图像。但是，h:body onload不起作用（如BalusC's answer here中所述）。

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

要在ajax调用中部分更新您的网页，请使用render的{{1}}属性：

f:ajax

<h:commandLink id="link"> <f:ajax event="click" render=":faqAddUpdateForm" listener="#{countryPages_Detail.loadImagesUsingAjax}" /> </h:commandLink>将呈现整个表单。如果这太多，请将包含图片的render=":faqAddUpdateForm" ID（例如“imageGroup”）并在panelGroup属性中使用此ID：

render

如何在页面加载时使用ajax加载图像

1 个答案: