在居中的PopupPanel中顯示GWT圖片onLoad

Question

使用GWT我正在用ClickHandler顯示圖片縮略圖，然後在居中的PopupPanel中顯示完整圖片（可能爲幾MB）。爲了讓它居中，必須在顯示彈出窗口之前加載圖像，否則圖像的左上角放置在屏幕中間（圖像認爲它是1px大）。這是我使用這樣做代碼：

private void showImagePopup() { 
     final PopupPanel popupImage = new PopupPanel(); 
     popupImage.setAutoHideEnabled(true); 
     popupImage.setStyleName("popupImage"); /* Make image fill 90% of screen */ 

     final Image image = new Image(); 
     image.addLoadHandler(new LoadHandler() { 
      @Override 
      public void onLoad(LoadEvent event) { 
       popupImage.add(image); 
       popupImage.center(); 
      } 
     }); 
     image.setUrl(attachmentUrl + CFeedPostAttachment.ATTACHMENT_FILE); 
     Image.prefetch(attachmentUrl + CFeedPostAttachment.ATTACHMENT_FILE); 
    } 

然而，LoadEvent事件從來沒有發射，因此圖像永遠不會顯示。我該如何克服這一點？我想避免使用http://code.google.com/p/gwt-image-loader/，因爲如果我可以避免它，我不想添加額外的庫。謝謝。

Answer 1

onLoad()方法只會在圖像加載到DOM後觸發。這是一個快速的解決方法：

... 

final Image image = new Image(attachmentUrl + CFeedPostAttachment.ATTACHMENT_FILE); 
image.addLoadHandler(new LoadHandler() { 
    @Override 
    public void onLoad(LoadEvent event) { 
     // since the image has been loaded, the dimensions are known 
     popupImage.center(); 
     // only now show the image 
     popupImage.setVisible(true); 
    } 
}); 

popupImage.add(image); 
// hide the image until it has been fetched 
popupImage.setVisible(false); 
// this causes the image to be loaded into the DOM 
popupImage.show(); 

... 

希望有所幫助。