How to prefetch image in GWT?

Question

I tried the following code:

RootPanel root = RootPanel.get("root");
root.clear();
final FlowPanel p = new FlowPanel();
root.add(p);
for (int i=0; i<20; ++i) {
    String url = "/thumb/"+i;
    final Image img = new Image(url);
    img.addLoadHandler(new LoadHandler() {
        @Override
        public void onLoad(LoadEvent event) {
        p.add(img);
    }
});
Image.prefetch(url);

But it does not work for me. Did I missed something?

dreak · Answer 1 · 2012-10-05T06:33:46.910

7

Image load handler is called only in the case, when image is attached to the DOM. So you have to add image to the DOM outside the loadHandler:

p.add(img);
img.addLoadHandler(new LoadHandler() {
    @Override
    public void onLoad(LoadEvent event) {
        //do some stuff, image is loaded
    }
}

edited Oct 05 '12 at 06:33

answered Oct 05 '12 at 06:26

dreak

71
1
2

1

dreak is right, your code has a logic error and the img is never attached to the DOM. Compare your code with this snippet – LoneWolf Oct 05 '12 at 06:48

score 1 · Answer 2 · answered Jun 06 '13 at 22:29

1

ImageElement img = DOM.createImg().cast();
img.setSrc("images/myImage.png");

answered Jun 06 '13 at 22:29

vinnyjames

2,040
18
26

How should this help? – Michael Mar 06 '14 at 13:37
it's a shorter way of accomplishing the prefetch – vinnyjames Mar 06 '14 at 17:28
But how do I turn the ImageElement into an Image? – Michael Mar 06 '14 at 18:34
not sure if/how you can convert an ImageElement to an Image – vinnyjames Mar 06 '14 at 22:03
How do you set the onload handler on the ImageElement? – Michael Jan 20 '15 at 20:51
@confile looks like this question has the answer you're looking for http://stackoverflow.com/questions/16542266/handler-on-dom-elements-in-gwt – vinnyjames Jan 21 '15 at 02:47

score 1 · Answer 3 · answered Nov 11 '10 at 16:35

What Stan said makes sense.

I think the problem is that the LoadHandler isn't being called for some reason. I've always managed without a LoadHandler, but I usually add an errorHandler as per the JavaDoc demo which is triggered if loading fails. This should work:

final Image img = new Image();

img.addErrorHandler(new ErrorHandler() {
      public void onError(ErrorEvent event) {
        // Handle the error
      }
    });

img.setUrl(url);
p.add(img);

See the example in the GWT Javadoc: http://google-web-toolkit.googlecode.com/svn/javadoc/2.1/com/google/gwt/user/client/ui/Image.html

How to prefetch image in GWT?

3 Answers3

Linked