Можно ли заставить спрайты изображений GWT с использованием ImageBundle работать в IE7 и IE6?

Question

Я пытаюсь использовать ClientBundle в своем приложении GWT, чтобы отправлять несколько изображений в виде одного файла. Я объявляю пачку так:

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 рядом с icon2 рядом с icon3 и так далее. В инструментах разработчика IE8, использующих режим IE8-as-IE7 или представление совместимости, я вижу, что он показывает изображение с именем файла, например 26BEFD2399A92A5DDA54277BA550C75B.cache.png, что я и ожидал.

Так есть ли способ заставить спрайты изображений GWT работать в IE7 и ниже? Если нет, есть ли способ изящно ухудшить, чтобы пользователи других браузеров получили ускорение спрайтов, а пользователи IE7 и IE6 получили что-то, что выглядит правильно, но медленнее?

Редактировать: В Руководстве разработчика по комплекту клиентов обсуждается использование ClientBundle и @sprite и говорится: «Поддержка IE6 в этом формате невозможна, поскольку структурные изменения в DOM необходимы для реализации эффекта «окна». Как только можно различить ie6 и ie7 в user.agent, мы могли бы вернуться к поддержке 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

Вы можете использовать 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();

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

Как вы используете ImageResource?

Проблема, на которую вы ссылаетесь, существует, только если вы используете ее с директивой CssResource @sprite.

Если вы используете его вместо создания экземпляра объекта Image, он должен нормально работать в IE6 + 7