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

Я пытаюсь использовать 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);
  }
}

4 ответа

Решение

Проблема с использованием Image.setUrl(MyResources.INSTANCE.icon1(). GetUrl()).

Вместо этого вы должны использовать Image.setResource(MyResources.INSTANCE.icon1())

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

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

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

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

Я получаю аналогичную проблему и в 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?

Другие вопросы по тегам