Question

I have really strange problem. I’m trying to get width and height of an image using following way:

1. Create a image tag and add .src to it.
2. add this image tag to document.body.
3. making this image tag visible (display:inline).
4. getting .offsetWidth and .offsetHeight of element.
5. hidding image tag(display:none);

all this is done using JS and it all work really well on my localhost, but when I uploaded a site to my client hosting provider I was amazed. offsetWidth and .offsetHeight was 0 in step 4. Why do that happen? I think that I need some kind of “flush” after step 3 before step 4, but I’m not exactly sure. Any suggestions ? Thank you.

Answer 1

You have to wait for the image to actually load over the network. You don’t need to add the thing to the DOM either:

var img = new Image();
img.onload = function() {
  handleImageSize(this.width, this.height);
};
img.src = "http://whatever.com/your/img.jpg";

Here, “handleImageSize” would be a function you write to do whatever it is you need to do with the image dimensions.