Question

I’m trying to use a ClientBundle in my GWT application to make multiple images get sent as a single file. I declare the bundle like so:

public interface MyResources extends ClientBundle {
  public static final MyResources INSTANCE = GWT.create(MyResources.class);

  @Source("icon1.png") ImageResource icon1();
  @Source("icon2.png") ImageResource icon2();
}

This works great in Firefox and IE8, but in IE7 (and earlier) the whole sprite shows up in place of one of my original images – that is, icon1 is next to icon2 next to icon3, and so on. In IE8’s developer tools using IE8-as-IE7 mode or Compatibility View, I can see that it’s showing an image with a file name like 26BEFD2399A92A5DDA54277BA550C75B.cache.png, which is what I’d expect.

So is there any way to make GWT image sprites work in IE7 and lower? If not, is there any way to gracefully degrade so users of other browsers get the speedup of spriting and IE7 and IE6 users get something that looks right but is slower?

Edit: The Client Bundle Developer’s Guide has a discussion of using ClientBundle and @sprite, and says “Support for IE6 isn’t feasible in this format, because structural changes to the DOM are necessary to implement a “windowing” effect. Once it’s possible to distinguish ie6 and ie7 in user.agent, we could revisit support for ie6. In the current implementation, the ie6 code won’t render correctly, although is a purely cosmetic issue.” Is this what’s going on in my case, and is there a way to work around it? Showing all the images is “purely a cosmetic issue”, but it’s a pretty severe one.

Edit 2: Here’s how I use the images:

public class MyTabHeader extends Composite {
  @UiField Image icon;

  public MyTabHeader(String iconPath) {
    initWidget(uiBinder.createAndBindUi(this));
    this.icon.setUrl(iconPath);
  }
}

public class MyTabPanel extends TabPanel {
  public MyTabPanel() {
    String icon1 = MyResources.INSTANCE.icon1().getURL();
    MyTabHeader tabHeader1 = new MyWidget(icon1);
    Widget tabContent1 = new HTML("Content 1");
    add(tabContent1, tabHeader1);

    String icon2 = MyResources.INSTANCE.icon2().getURL();
    MyTabHeader tabHeader2 = new MyWidget(icon2);
    Widget tabContent2 = new HTML("Content 2");
    add(tabContent2, tabHeader2);
  }
}

Answer 1

The use of Image.setUrl(MyResources.INSTANCE.icon1().getUrl()) is the problem.

You should be using Image.setResource(MyResources.INSTANCE.icon1()) instead