Image 在GWT中显示图像

我已经创建了一个小部件来显示幻灯片。在firefox中，一切都很好，但在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++;

    }

}

---

}

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

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

下面是根据您的要求从我的一个图像加载器类中提取的一点内容，尽管有不同的方法可以实现这一点：

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

准备好EverythSign后，将创建原始小部件/页面

---

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

Tks。我会试试，但你能给我一些关于图像加载器的例子吗？我试过你的方法，但没有任何改变。我发布了我的widget客户端。你能给我一些理想吗？你有没有实施计时器？如果不等待图像加载，JS将抛出nullPointerException。此外，您没有将唯一名称与ImageElements关联，而是在加载程序中使用了“”，这将导致每次加载图像时覆盖关联。我修复了ImageElements的唯一名称。我试图实现计时器，但我不知道代码中的“buildWidget（）”是什么……buildWidget（）只是我使用的元素的初始化函数的一部分。基本上是这样的：onModuleLoad（）=>调用计时器，当ready=>计时器执行网站的“构建”时。如果你没有大量的图像，也没有实现奇怪的东西，那么这个过程应该不会被用户注意到。

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