イメージがウィッケットで読み込まれている間にローディング画面を表示

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は常に、ロードするコンポーネントを表示するためにhtmlタグとして<div>を使用します。あなたが別のパネルでそれをラップする必要がありますベース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; 
    } 
});