Image width & height lost in Firefox

[emma.sax]

My script is as follows:

function setImageSizes() {
var staticHeight = 70;

if(!document.getElementsByTagName || !document.images) return false;
var thumbnail = document.getElementsByTagName("img");

for(var i=0; i<thumbnail.length; i++) {
if(thumbnail[i].className=="thumbnail_img") {
var tempImage = document.createElement("img");
tempImage.src = thumbnail[i].src;

//problem here
var theWidth = tempImage.width;
var theHeight = tempImage.height;

//scale new width
theWidth = Math.round((theWidth/theHeight)*staticHeight);

thumbnail[i].style.width=theWidth;
thumbnail[i].style.height=staticHeight;
}
}

}
window.onload=setImageSizes;

The problem is that Firefox (I'm using 1.5) shows tempImage width and
height as 0 - shows correctly in IE.

I can't just use getAttribute on the image in the page as they have
been set incorrectly and this code can not be changed, therefore am
trying to get the dimension of the original image on the server.

Does anyone know what I can use instead?

Thanks

M

[Richard Cornford]

em******@gmail.com wrote:

function setImageSizes() {
var staticHeight = 70;

if(!document.getElementsByTagName || !document.images) return false;

This is no rational. While the rest of the script does depend upon -
document.getElementByTagName -(though it doesn't need to) it never used
- doucment.images - and so the absence of that feature is not
significant here and should not be subject to testing here. On the
other hand the - document.createElement - is used (again
unnecessarily), but no effort has been made to verify its availability
in the environment (nor that the version available is a W3C DOM
standard version rather than the pre-DOM version of IE 4 and the dummy
version in late Opera 6 browser).

var thumbnail = document.getElementsByTagName("img");

As the - document.images - is already a collection of IMG elements in
the current document it is perverse to set about creating a new
nodeList that represents exactly the same collection.

for(var i=0; i<thumbnail.length; i++) {
if(thumbnail[i].className=="thumbnail_img") {
var tempImage = document.createElement("img");
tempImage.src = thumbnail[i].src;

//problem here
var theWidth = tempImage.width;
var theHeight = tempImage.height;

When a value is assigned to the - src - of an IMG element an
asynchronous request for a resource is made. If that resource does
supply dimension information for an image that information will not be
available until the response has arrived and has (at least) started to
be processed as an image. Attempting to read width and height
properties from the IMG element fractions of a millisecond after the
request is made will tend to be unsuccessful.

//scale new width
theWidth = Math.round((theWidth/theHeight)*staticHeight);

thumbnail[i].style.width=theWidth;
thumbnail[i].style.height=staticHeight;
}
}

}
window.onload=setImageSizes;

The problem is that Firefox (I'm using 1.5) shows tempImage width and
height as 0 - shows correctly in IE.

You can consider yourself extremely lucky if IE shows the correct
dimensions anywhere but sourcing the images from the local hard disk
(and not always then).

However, reading the widths and heights from IMG elements and Image
objects following the loading of an image file has never been
universally successful. There were always browsers that did not
transfer the information form the image to the properties.

I can't just use getAttribute on the image in the page as they have
been set incorrectly

How, why?

and this code can not be changed,

Why?

therefore am
trying to get the dimension of the original image on the server.

Does anyone know what I can use instead?

Have the server insert the data directly into the javascript?

Richard.

[emma.sax]

it never used

- doucment.images - and so the absence of that feature is not
significant here and should not be subject to testing here.

left in from previous tries, i tend to clean up the code once i've
found the solution. thanks tho.

var thumbnail = document.getElementsByTagName("img");

As the - document.images - is already a collection of IMG elements in
the current document it is perverse to set about creating a new
nodeList that represents exactly the same collection.

i wouldn't say it was perverse, i'd say it was an oversight. thanks
again.

You can consider yourself extremely lucky if IE shows the correct
dimensions anywhere but sourcing the images from the local hard disk
(and not always then).

the images are on the server, not local disk - so i guess i'm lucky.

However, reading the widths and heights from IMG elements and Image
objects following the loading of an image file has never been
universally successful. There were always browsers that did not
transfer the information form the image to the properties.

so is there no other way of doing this? this is all I wanted to know
from this posting.

I can't just use getAttribute on the image in the page as they have
been set incorrectly

How, why?

if you really want the whole story.... the company i work for uses
external programmers to code the main stuff - this takes about 4 week
turn around. so i was hoping to get something together in a few days
that we can just add in. the images have been set as a fixed height and
width (70x80px) but the images are different sizes and so are out of
proportion in the main.

and this code can not be changed,

Why?

see above

Does anyone know what I can use instead?

Have the server insert the data directly into the javascript?

i don't know what this means, but doubt i can do it as i have no
control over server side code.

thanks for you advice.

M