在Wicket中加载图像时显示加载屏幕

Question

我正在使用图片填充ListView。

在伪代码中：

populateItem(model){
    load base64 from database
    image.setDefaultModel(base64)

图片只是webcomponent，在html中只有<img src=""> 如何在图像加载时显示指示符？ 我首先考虑添加IAjaxIndicatorAware，但这会在图片执行AjaxRequest时触发指示符。

Answer 1

由于您似乎将图像加载并显示为Base64 src，它将直接在html响应中发送而不会在以后加载（与具有链接到另一个URI的src的图像相反）。

您可以将图片包装在AjaxLazyLoadPanel中。 这将在生成内容时首先显示AjaxIndicator，并在加载/生成完成后稍后由实际加载的内容替换：

修改

  

我遇到了异常：组件必须应用于[img]类型的标签。

我没有考虑到这个问题。 AjaxLazyLoadPanel始终使用<div>作为html标记来显示它加载的组件。要显示基本64图像，您需要将其包装在另一个面板中：

public class Base64ImagePanel extends Panel {
     public Base64ImagePanel(String wicketId, String base64Data, String contentType) {
          super(wicketId);
          WebMarkupContainer image = new WebMarkupContainer("image") {
                protected void onComponentTag(ComponentTag tag) {
                      super.onComponentTag(tag);
                      checkComponentTag(tag, "img");
                      tag.put("src", "data:" + contentType + ";base64," + base64Data);
                }
          }
          add(image);
     }
}

Base64ImagePanel.html：

<wicket:panel>
    <img wicket:id="image"></img>
</wicket:panel>

然后在AjaxLazyLoadPanel中使用该包装器面板：

add(new AjaxLazyLoadPanel("imageLazyLoad") {
    @Override
    public Component getLazyLoadComponent(String id) {
         //load your actual base64 from database, i use some example Strings for demonstration in the following line
         Base64ImagePanel imagePanel = new Base64ImagePanel(id, "iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==", "image/png");
         return imagePanel;
    }
});