이미지가 개찰구에로드되는 동안 화면 로딩 표시

Question

ListView을 이미지로 채 웁니다. 의사에서

:

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

이미지는 단지입니다 webcomponent 및 HTML에 이미지가로드되는 동안 나는 표시를 보여줄 수있는 방법은 바로 <img src=""> 이다? 처음으로 IAjaxIndicatorAware을 추가하려고 생각했지만 이미지가 AjaxRequest 일 때 표시기가 트리거됩니다.

Answer 1

이미지를 Base64 src로로드하여 표시하는 것처럼 보이기 때문에 직접 HTML 응답으로 보내지고 나중에로드되지 않습니다 (src가 다른 URI로 연결되는 이미지와 달리).

AjaxLazyLoadPanel에 이미지를 래핑 할 수 있습니다.

편집

나는 예외를 가지고 : : 콘텐츠가 생성되고이 생성 /로드가 완료되면 나중에 실제로드 된 내용으로 대체다면 이 먼저 AjaxIndicator를 표시합니다 구성 요소가 있어야합니다 [img] 유형의 태그에 적용됩니다.

나는 그 문제를 고려하지 않았습니다. AjaxLazyLoadPanel은 항상 <div>을 html 태그로 사용하여로드하는 구성 요소를 표시합니다.

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

을 그리고 다음 AjaxLazyLoadPanel에서 랩퍼 패널 사용 :

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을 : 기본 64 이미지를 표시하려면 다른 패널에 포장해야

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; 
    } 
});