onLoad 在居中的 PopupPanel 中显示 GWT 图像

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

 ...

希望有帮助。