Safari image dimensions

[icax0r]

hi,

I am working on a page that works fine in IE/Firefox but does not work in Safari. I am trying to get the original width and height of an image at its original resolution by using im.width and im.height, but while these are the correct numbers in firefox, they are zero in safari (perhaps because of the fact that the image isn't fully loaded at the time this is called). anyone know of any other ways to get the original dimensions of an image that isn't loaded yet in Safari? any help is very much appreciated

thanks

[toicontien]

If you are trying to access the height and width properties of an image element, Safari may not support it. Consider the example code below:

<script type="text/javascript">
var img = document.getElementById("id_of_an_image_tag");

// The variable 'img' not refers to a node in the DOM

alert(img.height);
</script>

The height and width properties of an image might be a throwback to the old and deprecated document.images array, in which height and width were supported properties. You may have better luck now with offsetHeight and offsetWidth.

<script type="text/javascript">
var img = document.getElementById("id_of_an_image_tag");

// The variable 'img' not refers to a node in the DOM

alert(img.offsetHeight);
</script>

[nunhamb]

Hi. I've got the same problem ,but your method is not working,because when Safari wants to create picture it needs the actual height of image (And I give only width at css.)It shows that my picture height is 0 .Can anyone help ? Please.

[Tabo]

I would have thought reply #1 would have worked, but why not


document.createElement("img")
that.src="yourimage.gif"
get the default height from that

[nunhamb]

Look at the code ,please

var imgDiv=document.createElement("div");
imgDiv.className="imgdiv";

var pic=document.createElement("img");
imgDiv.appendChild(pic);
pic.className="picture";

and css

.imgdiv{position :absolute;top:15px;left:15px;width:172px;border:solid;border-color :#c0c0c0 #red #red #c0c0c0;border-width:1px 2px 2px 1px}
.picture{position :absolute;top:8px;left:8px;width:154px;}

I have to give the height to div othervise it stays as one line and image goes just after it ,its surprising but the div have to stretch and get the image height but it doesn't .So I just used this

imgDiv.style.heght=pic.offsetHeight+16;

This works perfectly in any other browser except Safary .It gives to div just 16px height ,because it takes height of image from css I guess.I cant give the height because browser itself adjust image heght for width 154 px.
I can't understand why this code doesn't work at Safari because for any other element like table ,div or span it works perfectly and Safari takes their height by using .offsetHeight.
Any ideas why it goes bad whith <img>element?

[toicontien]

If you create an image and assign the src property, and then immediately try to get the width or the height, the browser most times won't have a value for that yet. The image is in the process of downloading when you try to detect the width or height, and thus the browser does not know the image dimensions.

You must wait until the image has been fully downloaded before you can detect the width or height.

[Tabo]

Something like


MyImage = document.createElement("img");
MyImage.onload = function(){alert(MyImage.height)};
MyImage.src = "file";