GWT - PreloadedImage терпит неудачу в IExplore

Question

• ответ внизу поста

Я создал веб-сайт, который отображает несколько изображений и рисует их на холсте. Эти изображения являются экземплярами PreloadedImage и запускают метод draw для события load. Это прекрасно работает в Chrome, но в Internet Explorer их ширина равна 0 при запросе (в Chrome их ширина указана правильно) с помощью PreloadedImage.getWidth(), или getOffsetWidth(), или с помощью getElement(). GetStyle(). GetWidth()....

При проверке экземпляра PreloadedImage в Eclipse я вижу, что элемент имеет правильную ширину и высоту, но когда его запрашивает GWT, результат равен нулю, что приводит к неправильному рисованию.

Есть идеи?

• редактировать 1: попытался, дождавшись окончания загрузки с использованием таймера:

Я сделал быструю попытку подождать, пока изображение рендерится, но оно совсем не загружается:

currentImage = new PreloadedImage();
currentImage.addLoadHandler(new LoadHandler() {
   @Override
   public void onLoad(LoadEvent event) {
       Timer timer = new Timer() {
           @Override
           public void run() {
           System.out.println("timer check: width: " +currentImage.getWidth());
              if(currentImage.getWidth()>0) {
                  //draw the image
                  this.cancel();
              }
           }
        };
        timer.scheduleRepeating(100);
    }
});

• изменить 2: немного больше информации:

Когда изображение загружено, перед рисованием я запрашиваю его размеры. При проверке currentImage (экземпляр PreloadedImage) метод toString возвращает следующее:

<img aria-hidden="true" 
style="display: none; visibility: hidden;" 
class="PRELOADEDIMAGE" 
src="/imageservlet?filename=1368280253128&amp;height=1000" width="1505" height="1000">

Обратите внимание, что ширина и высота установлены правильно. Однако при запросе следующее:

currentImage.getWidth()
currentImage.getOffsetWidth()
String heightattr = e.getAttribute("height");

Я получаю последовательно ноль результатов. Я подозревал, что кодирование амперсанда является проблемой, но Internet Explorer работает с ним так же, как Chrome (в конце концов, тот же URL-адрес используется для извлечения изображения, и это правильно).

Answer 1

У меня была та же проблема, когда я не мог получить размеры в IE для изображения, которое не было видно.

Вы должны сделать его видимым, получить ширину и высоту и снова скрыть его (это то, что вы сделали, но более простым способом).

    Image img = new Image(imgData);
    img.setVisible(false);
    contentPane.add(img);
    img.addLoadHandler(new LoadHandler() {
        @Override
        public void onLoad(LoadEvent event) {
            img.setVisible(true); //make it visible just to work on IE
            int original_width = img.getWidth();
            int original_height = img.getHeight();

            img.setVisible(false); // hide it again

            //other stuff here
        }
    });            

Answer 2

Использование события загрузки на изображениях может быть проблемой. У меня были подобные проблемы в прошлом. Я думаю, что решение, которое я использовал, было поставить setTimeout(function(){...}, 10); в функции onLoad. Это дает браузеру момент для рендеринга изображения и получения правильных размеров

Answer 3

Хорошо, глупо, после долгих часов работы над проблемой и размещения вопроса я нахожу ответ более или менее напрямую:

this.getElement().getStyle().setDisplay(Display.BLOCK);

перед вызовом любого измерения и

this.getElement().getStyle().setDisplay(Display.NONE);

после этого, если это необходимо, IE может получить правильную ширину.