GWT - PreloadedImage fails in IExplore

Question

answer at bottom of the post

I've created a website that displays a numbers of images and draws them on a canvas. Those images are PreloadedImage instances, and fire the draw method on their load event. This works fine in Chrome but in Internet Explorer their width are 0 when asked for (in Chrome, their width is correct) using PreloadedImage.getWidth(), or getOffsetWidth(), or via getElement().getStyle().getWidth()...

When inspecting the instance of the PreloadedImage in Eclipse, i can see that the element does have the correct width and height, but when it's requested by GWT, the result is zero, resulting in incorrect drawing.

Any ideas?

edit 1: tried it by waiting for the load to finish using a Timer:

I did a quick try to wait for the image to render but it seems not to be loading at all:

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);
    }
});

edit 2: some more information:

When the image is loaded, before drawing, I request its dimensions. When inspecting currentImage (instance of PreloadedImage), the toString method returns the following:

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

Note that width and height are set correctly. However, when requesting the following:

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

I get consistently zero results. I suspected the encoding of the ampersand to be a problem, but Internet Explorer deals with it the same way as Chrome does (in the end, the same url is used to fetch the image, and it is correct).

score 2 · Answer 1 · answered Nov 26 '13 at 14:58

I had the same problem where I couldn't get the dimensions in IE for an image that was not visible.

You have to make it visible, get width and height and make it hidden again (it's what you did, but in a more simple way).

    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
        }
    });

score 0 · Answer 2 · answered May 12 '13 at 13:29

0

Using a load event on images can be a pain alright. I've had similar problems in the past. I think the solution I used was to put a setTimeout(function(){...}, 10); in the onLoad function. It gives the browser a moment to render the image and get the correct dimensions

answered May 12 '13 at 13:29

Jackson

3,476
1
19
29

I did a quick try to wait for the image to render but it seems not to be loading at all. I added some code to the Question above, thanks for the response. – Joachim Nielandt May 12 '13 at 13:51
Ok, silly, after toiling hours on the problem and posting the question, I find the answer more or less directly: put this.getElement().getStyle().setDisplay(Display.BLOCK); before any dimension call and this.getElement().getStyle().setDisplay(Display.NONE); after it if necessary, IE is then able to retrieve the correct width. – Joachim Nielandt May 12 '13 at 14:20

score 0 · Answer 3 · answered May 31 '13 at 13:25

Ok, silly, after toiling hours on the problem and posting the question, I find the answer more or less directly: put

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

before any dimension call and

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

after it if necessary, IE is then able to retrieve the correct width.

GWT - PreloadedImage fails in IExplore

3 Answers3