GWT Image Loading for Canvas

Question

Without using any image loading library, I am loading images like below:

final Image img = new Image();
img.setVisible(false);
RootPanel.get().add(img);
img.addErrorHandler(new ErrorHandler() {
    @Override
    public void onError(ErrorEvent event) {
        System.out.println(event);
    }
});
img.addLoadHandler(new LoadHandler() {
    @Override
    public void onLoad(LoadEvent event) {
        ImageElement data = ImageElement.as(img.getElement());
        RootPanel.get().remove(img);
        obj.setData(data);
        System.out.println("Arrived:" + (System.currentTimeMillis()-startTime) + "ms");
        render();
    }
});

Without using RootPanel.get().add(img); the image will never be added to the DOM. So onLoad will not be triggered. But when you add the image into the DOM, if you don't remove it, this will be memory leak.

My Observations about the above code:

1. If I dont add the image to the DOM, load handler will not be triggered.
2. If I do, but dont remove after loaded, a memory leak will be occured.
3. I I do, and I do remove, Chrome will call garbage collection after 256 MB. Firefox never called garbage collection. So a memory leak occured. May be Firefox will call garbage collector when it needs. I dont know this issue so much.

My questions are, are there image loading procedures (libraries) handle image loading?
Do they automatically remove the image from the DOM after the image has loaded?
Is there a more appropriate way to handle this issue where you're drawing many images but does not require the image after drawing?
Also are there fast approaches to add and remove the images to/from the DOM?

Answer 1

To load images use the com.google.gwt.widgetideas.graphics.client.ImageLoader

That loads a large amount of images at one time.