在GWT中显示图像

Question

我已经创建了一个小部件来显示slideshow.In火狐，一切都很好，但是在chrome中什么都没有发生。在我多次刷新之后，幻灯片显示出来了。我也不知道原因。你能给我一些想法吗？Tks这是我的GWT客户端：

public SlideClient() {
    super();
    setStyleName("flexslider");
    setHeight("100%");
    setWidth("100%");

}

@Override
public void updateFromUIDL(UIDL uidl, ApplicationConnection client) {
    this.client = client;
    this.paintableId = uidl.getId();
    listImage = Arrays.asList(uidl.getStringArrayAttribute("listImage"));
    listUrl = Arrays.asList(uidl.getStringArrayAttribute("listUrl"));

    loadImage();
    checkImagesLoadedTimer.run();
}

public void display() {
    m.setStyleName("slides");
    m.setHeight("100%");
    m.setWidth("100%");
    add(m);
}

public native void slideshow() /*-{
$wnd.$('.flexslider').flexslider({slideshowSpeed: 2000});
}-*/;

public native String getURL(String url)/*-{
return $wnd.open(url,
'target=_blank')
}-*/;

private Timer checkImagesLoadedTimer = new Timer() {

    @Override
    public void run() {

        if (loadedImageElements.size() == toLoad) {
            display();
        } else {
            add(new Label("đang load "+loadedImageElements.size()));
            checkImagesLoadedTimer.schedule(2000);
        }
    }
};

private void loadImage() {
    for (String tmp : listImage) {
        AbsolutePanel panel = new AbsolutePanel();
        final Image ima = new Image(tmp);
        add(new Label("before put"));
        ima.addLoadHandler(new LoadHandler() {

            @Override
            public void onLoad(LoadEvent event) {
                loadedImageElements.put(toLoad+"", ima);
                slideshow();
                add(new Label("đang put "+loadedImageElements.size()));
            }
        });
        add(new Label("after put"));

        panel.add(ima);
        m.add(panel);

        if (toLoad != 0) {
            panel.setVisible(false);
        }
        toLoad++;

    }

}

}

Answer 1

您是否实现了图像加载器，以便在图像显示之前对其进行准备？一个干净的解决方案是将图像元素作为不可见的元素添加到页面根目录中，等待它们加载，然后在其他地方使用它们。

您还应该查看有关ImageBundling的教程：ImageResource

下面是你所请求的我的一个图像加载器类的一小段摘录，尽管有不同的方法可以实现这一点：

private HashMap<String,ImageElement> loadedImageElements = new HashMap<String,ImageElement>();
private int toLoad = 0;

private void loadImage(final String name, String url){
    final Image tempImage = new Image(url);             
    RootPanel.get().add(tempImage);

    ++toLoad;

    tempImage.addLoadHandler(new LoadHandler(){
        public void onLoad(LoadEvent event) {               
            loadedImageElements.put(name,ImageElement.as(tempImage.getElement()));
            tempImage.setVisible(false);                
        }           
    });
}

通过指向图像的实际位置的ClientBundle接口来检索图像url。我还实现了一个在后台运行的计时器，以检查是否所有图像都已加载：

private Timer checkImagesLoadedTimer = new Timer(){
    public void run() {
        System.out.println("Loaded " + loadedImageElements.size() + "/" + toLoad + " Images.");
        if(loadedImageElements.size() == toLoad){
            buildWidget();
        }else{              
            checkImagesLoadedTimer.schedule(50);
        }
    }       
};

一切准备就绪后，就会创建原始的小部件/页面。

但正如我所说的，有许多方法可以实现图像加载器。尝试不同的实现，并选择最适合您需求的实现。