How Come Image's Style Property Is Undefined In Img.Onload?

[thedealmaker]

Hi,

I have problem with undefined value inside image's onload function. I have this problem only in IE(I am using IE6), but this code works in Firefox. This is part of the code, assume all the variable/elements are defined or created.

 for(i = 0; i < 10; i++) {
imgElement = document.createElement('img');
imgElement.onload = function() {chooseShow(this);};
imgElement.src = url[i];
divElement = document.createElement('div');
divElement.style.display = 'none';
divElement.appendChild(imgElement);
.....
}
function chooseShow(imgElement) {
 alert(imgElement.naturalWidth);
}

Then in chooseShow(), I tried to read the imgElement.naturalWidth/naturalHeight and they are always undefined. I tried Width, but it's always 0. I thought that it's because the image isn't done loading, so I tried "while(imgElement.naturalWidth == 0);" in chooseShow(), but it's in an infinite loop.

Does anyone know why?

Many thanks.

[birdbrain]

Hi there thedealmaker,

unfortunately, naturalHeight and naturalWidth are unnatural to IE. :)

I have not, as yet, been able to find an IE equivalent. :(

This, of course, does not mean that one does not exist.;)

birdbrain

[thedealmaker]

so, what should I do? Even width and height property are 0.

[thedealmaker]

btw, I just check the property variables, like clientWidth, offsetLeft, width, etc. All these dimension related variables are 0!

WTH is IE doing?

[Bernard Marx]

Those properties are likely to be zero if the element has display: none.
The way around that is to make it invisible instead + position: absolute
- although this may not fit into your desires.

[thedealmaker]

Bernard Marx, you are the genius!

Actually, I didn't set the image's display to none, I set the div's display surrounding the image to none. I never thought that it will affect the image's style properties. Now, it all works after set the div as hidden rather than display = 'none'.

I don't know what IE is thinking. Firefox has no weird problem like this.