在 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，然后在完成后由实际加载的内容替换 loading/generating:

编辑

I got an Exception : Component must be applied to a tag of type [img].

我没有考虑过这个问题。 AjaxLazyLoadPanel 始终使用 <div> 作为 html 标记来显示它加载的组件。要显示 base 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;
    }
});

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

Show loading Screen while Image is loading in wicket

wicket