Các hình ảnh GWT có thể sử dụng ImageBundle được thực hiện để làm việc trong IE7 và IE6 không?

Question

Tôi đang cố gắng sử dụng ClientBundle trong ứng dụng GWT của mình để làm cho nhiều hình ảnh được gửi dưới dạng một tệp. Tôi tuyên bố bó như vậy:

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

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

này hoạt động tuyệt vời trong Firefox và IE8, nhưng trong IE7 (trở về trước) toàn bộ ma xuất hiện ở vị trí của một trong những hình ảnh ban đầu của tôi - có nghĩa là, icon1 là bên cạnh biểu tượng 2 bên cạnh biểu tượng 3, v.v. Trong các công cụ phát triển của IE8 sử dụng chế độ IE8-as-IE7 hoặc Chế độ xem tương thích, tôi có thể thấy rằng nó hiển thị một hình ảnh có tên tệp như 26BEFD2399A92A5DDA54277BA550C75B.cache.png, đó là những gì tôi mong đợi.

Vì vậy, có cách nào để làm cho hình ảnh GWT sprites hoạt động trong IE7 và thấp hơn không? Nếu không, có cách nào để giảm thiểu một cách duyên dáng để người dùng các trình duyệt khác có được tốc độ tăng tốc và người dùng IE7 và IE6 có được thứ gì đó có vẻ đúng nhưng chậm hơn không?

Edit: Các Client Bundle Developer's Guide có một cuộc thảo luận của việc sử dụng ClientBundle và @sprite, và nói: "Hỗ trợ cho IE6 là không khả thi ở định dạng này, bởi vì thay đổi cấu trúc để DOM là cần thiết để thực hiện một 'cửa sổ' có hiệu lực. Một khi nó có thể phân biệt ie6 và ie7 trong user.agent, chúng ta có thể xem lại hỗ trợ cho ie6. Trong thực hiện hiện tại, mã ie6 sẽ không hiển thị chính xác, mặc dù là một vấn đề hoàn toàn là mỹ phẩm. " Đây có phải là những gì đang xảy ra trong trường hợp của tôi, và có một cách để làm việc xung quanh nó? Hiển thị tất cả các hình ảnh là "hoàn toàn là một vấn đề mỹ phẩm", nhưng đó là một vấn đề khá nghiêm trọng.

Chỉnh sửa 2: Đây là cách tôi sử dụng hình ảnh:

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

Việc sử dụng Image.setUrl (MyResources.INSTANCE.icon1(). GetUrl()) là vấn đề.

Bạn nên sử dụng Image.setResource (MyResources.INSTANCE.icon1()) thay vì

Answer 2

Làm thế nào bạn đang sử dụng các ImageResource?

Sự cố mà bạn đang tham chiếu chỉ tồn tại nếu bạn sử dụng nó với chỉ thị CssResource @sprite.

Nếu bạn sử dụng nó bởi instantiating một đối tượng hình ảnh thay vào đó, nó sẽ làm việc tốt trong IE6 + 7

Answer 3

Tôi nhận được một vấn đề tương tự trong IE7 quá, và chủ yếu là vì tôi không có lựa chọn nào khác để sử dụng "getUrl () "tùy chọn vì tôi cần đặt tài nguyên làm hình nền. tức là thay vì một cái gì đó tương tự (lấy ví dụ trên):

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

tôi cần phải làm:

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

Trong khi việc sửa chữa cho các bit đầu tiên của mã trên là để làm "this.icon.setResource (MyResources.INSTANCE.icon1()) ", không hoạt động để thiết lập hình nền, vì nó chỉ mong đợi một Chuỗi. Trong IE8 và các trình duyệt khác, bit thứ hai của mã hoạt động tốt. Nhưng trong IE7, nó hiển thị toàn bộ bó hình ảnh (như vấn đề ban đầu được giải thích ở trên).

Vì vậy, có cách nào để có thể đặt hình ảnh nền bằng cách sử dụng hình ảnh từ GWB ResourceBundle để nó hoạt động chính xác trong IE7 không?

Answer 4

Bạn có thể sử dụng DataResource với 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();