代码之家  ›  专栏  ›  技术社区  ›  aem

使用ImageBundle的GWT图像精灵能否在IE7和IE6中工作?

  •  5
  • aem  · 技术社区  · 15 年前

    我正在尝试在我的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(和更早的版本)中,整个sprite会取代我的一张原始图片——也就是说,icon1在icon2旁边,icon3旁边,依此类推。在使用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);
      }
    }
    
    4 回复  |  直到 13 年前
        1
  •  9
  •   Chi    15 年前

    使用image.seturl(myresources.instance.icon1().geturl())是问题所在。

    您应该改为使用image.setresource(myresources.instance.icon1())

        2
  •  0
  •   Chi    15 年前

    您如何使用ImageResource?

    只有当您将其与cssresource@sprite指令一起使用时,您所引用的问题才存在。

    如果您通过实例化一个图像对象来使用它,那么它在IE6+7中应该可以正常工作。

        3
  •  0
  •   Riza    15 年前

    我在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资源包中的图像设置背景图像,以便它在IE7中正常工作?

        4
  •  0
  •   Rebzie    13 年前

    可以将数据资源与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();