Loading many Images from a Server in GWT efficiently?

Question

I use JSON to request many images from a server to be displayed in a

<g:Image />

on GWT client side.

What I am doing now is sending a GET request which returns a JSON list of image urls which point to images on my server.

When I attach these urls to my gwt Image I suppose it loads every image in a different request.

1. Is there a way to combine the requests of the images from the image urls to reduce request?

2. Is my approach the way to go?

Edit:

Well I know that for static images I use the ClientBundle. But Assume your app can create images and store them on the server file system. Then when you request those images from your app you need another way of doing it. What do you suggest?

Answer 1

Best way to handle images in GWT is to use ImageResources.

You have to create an ImageResource:

public interface ImageResources extends ClientBundle {

  ImageResources IMAGE_RESOURCES = (ImageResources) GWT.create(ImageResources.class);

  @Source("Gwt-logo.png")
  ImageResource gwtLogo();

}

and put your images in the same client-pacakge.

In your ui.xml you can reference the image resource like this:

<ui:with field="imageResources" type="com.path.client.resources.ImageResources" />

and use the image resource like this:

<g:Image resource="{imageResources.gwtLogo}"/>

GWT will create one sprite of all your images and load this sprite with one call. That is very efficent.