Question

我正在尝试在我的GWT应用程序中使用ClientBundle来使多个图像作为单个文件发送。我这样声明了这个包：

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

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

这在Firefox和IE8中效果很好，但在IE7（及更早版本）中，整个精灵显示在我的原始图像之一 - 也就是说，icon1在icon3旁边的icon2旁边，依此类推。在使用IE8-as-IE7模式或兼容性视图的IE8开发人员工具中，我可以看到它显示的文件名为26BEFD2399A92A5DDA54277BA550C75B.cache.png，这是我所期望的。

那么有没有办法让GWT图像精灵在IE7及更低版本中运行？如果没有，有没有办法优雅地降级，所以其他浏览器的用户获得spriting的加速，IE7和IE6用户得到看起来正确但速度较慢的东西？

编辑： Client Bundle Developer's Guide讨论了如何使用ClientBundle和@sprite，并说“在这种格式下支持IE6是不可行的，因为对DOM的结构更改是必要的实现“窗口化”效果。一旦有可能在user.agent中区分ie6和ie7，我们就可以重新支持ie6。在当前的实现中，ie6代码将无法正确呈现，尽管这是一个纯粹的装饰性问题。“这是在我的情况下发生了什么，有没有办法解决它？显示所有图像“纯粹是一个美容问题”，但它是一个相当严重的问题。

编辑2：以下是我使用图片的方式：

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

使用Image.setUrl（MyResources.INSTANCE.icon1（）。getUrl（））是个问题。

您应该使用Image.setResource（MyResources.INSTANCE.icon1（））而不是

Answer 2

你是如何使用ImageResource的？

只有将它与CssResource @sprite指令一起使用时，才会出现引用的问题。

如果您通过实例化Image对象来使用它，它应该在IE6 + 7

中正常工作

Answer 3

我在IE7中也遇到了类似的问题，主要是因为我别无选择，只能使用“getUrl（）”选项，因为我需要将资源设置为背景图像。即取而代之的（取上述例子）：

this.icon.setUrl(MyResources.INSTANCE.icon1().getURL());

我需要这样做：

this.mypanel.getElement().getStyle().setBackgroundImage("url("+MyResources.INSTANCE.icon1().getURL()+")");

然而上面第一段代码的修复是做“this.icon.setResource（MyResources.INSTANCE.icon1（））”，这不适用于设置背景图像，因为它只需要一个字符串。在IE8和其他浏览器中，第二位代码工作正常。但在IE7中，它显示整个图像包（就像上面解释的原始问题一样）。

那么有没有办法能够使用GWT ResourceBundle中的图像设置背景图像，以便它能在IE7中正常工作？

Answer 4

您可以将DataResource与IE7一起使用

if( BrowserUtils.getIEVersionNumber() < 8 && BrowserUtils.isBrowserIE()){
    icon = new Image(resources.iconIE().getSafeUri());
} else {
    icon = new Image(resources.icon());
}
...
in client bundle: 

@Source("icon.png")
DataResource iconIE();

@Source("icon.png")
imageResource icon();

可以使用ImageBundle的GWT图像精灵在IE7和IE6中工作吗？

4 个答案: