Можно ли заставить спрайты изображений 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?