5

In my GWT large project, I have a ClientBundle for my image resources. I defined about 40 GIF files inside it. (size of each file is about 5KB)

Then I create a class with a static method to set the proper image to the obj that get as parameters:

 public static void setImageFromId (String id,final Image img) {

    //for 1.gif
    if (id.equals("1")) {
        GWT.runAsync(new RunAsyncCallback() {
            @Override
            public void onFailure(Throwable reason) {}
            @Override
            public void onSuccess() {
                img.setResource(MyImages.INSTANCE.img1()); //MyImages is the ClientBundle
            }
        });
    }             

 }

    //for 2.gif
    if (id.equals("2")) {
        GWT.runAsync(new RunAsyncCallback() {
            @Override
            public void onFailure(Throwable reason) {}
            @Override
            public void onSuccess() {
                img.setResource(MyImages.INSTANCE.img2()); //MyImages is the ClientBundle
            }
        });
    }             

   //etc. for other images 3, 4, 5, ...
   //...

 }

I want to know is it good pattern for code-splitting? because if I don't do it all the 40 files will be cached to client browser in first call, but it is not necessary.

RGDS

Nav
  • 4,450
  • 10
  • 53
  • 84

1 Answers1

1

So you're trying to avoid downloading each image when your page loads. That's good, if you don't know ahead of time whether every image will be needed.

But, what your code is doing is using code-splitting to only download the code to display your images when the image is needed, which as you can see, is only one line of code per image.

Try this code:

if (id.equals("1")) {
  img.setSrc(MyImages.INSTANCE.img1().getUrl());
} else if (id.equals("2")) {
  //.. and so on.
}

Your images will only be downloaded and displayed when the relevant image is needed. You can use Firebug or Chrome's Developer Tools to see when your images are being downloaded, they should only be requested when needed.

If you have any more questions or find that all your images are being downloaded on page load, let me know and I'll edit my answer again to help you out.

Jason Hall
  • 20,632
  • 4
  • 50
  • 57
  • 1
    I can not understand you! would you please give an example? If I don't do it, with first call to "setImageFromId(..)" all resources download as x.cache.js (40 * 5KB = 200KB) while I just needed one of them (5KB) – Nav Jan 16 '11 at 18:23
  • I've edited my answer to hopefully be more clear. Let me know if it isn't, or if you find it doesn't work for you. – Jason Hall Jan 17 '11 at 04:54
  • you mean in these cases I should get images by setUrl not setResource ? – Nav Jan 17 '11 at 06:40
  • I tested, unfortunately all images downloaded, because of MyImages.INSTANCE.imgX().getUrl() – Nav Jan 17 '11 at 08:18
  • 1
    it is not difference you use setURL or setResource in your example! because you are using MyImages.INSTANCE.img1 so all the images downloaded and cached once, so I think best way is putting all images in public folder and set them via setUrl("./images/img1.gif"), What do you think? – Nav Jan 17 '11 at 08:21
  • So you're seeing all your images loaded at once? Can you post the code you have in your `ClientBundle`? Can you try clearing your browser's cache and seeing if that changes anything? – Jason Hall Jan 17 '11 at 17:55