IMG – offsetWidth

@vitasnikMay 29.2006

Hi all,

I’m having a bit of a problem determining the offsetWidth of an image correctly in IE. It only happens when I try to load up a new image that hasn’t yet been cached by the browser. So when I load up a new image, append it to the page and try to get its offsetWidth (or height) the browser displays “offsetWidth = 0”. If I refresh the page and run the same script again I get “offsetWidth = 176”.

What could be the problem?

Any help is appreciated,

Nik

to post a comment

JavaScript

@vwphillipsMay 29.2006 — #preload the image

zxcimgsrc=new Image();

zxcimgsrc.src='myimg.jpg';

then use the size of zxcimgsrc

Note the size is available when the image has been found and starts to load, if not found size is <50px;

@vitasnikauthorMay 29.2006 — #I preload the image before the alert(image.offsetWidth) line.

So this is what I have:

1) var image = document.createElement('img');

2) image.src = "http://www.somesite.com/someImage.jpg"; (some external image)

3) div.appendChild(image); (div being a div thats already appended to the DOM)

4) alert("Image Width: " + image.offsetWidth);

So first time I run this I get "Image Width: 0". I refresh the page and I get "Image Width: 166".

I assume that is because the second time the image is cached and the browser doesn't have to go externally to get it. I'm beginning to think that when I run it the fisrt time, by the time it gets to the 4th line "alert("Image Width: " + image.offsetWidth);" the image has not been loaded yet and the browser does not know the correct size. Or in other words the 4th line gets executed too quickly.

Is there a way to wait until the image has been fully loaded and appended to the DOM before executing some code?

@vitasnikauthorMay 29.2006 — #After some testing I am almost certain it is a time issue. I've added 2 alert boxes to print the same thing one after the other. So I still have the same code:

1) var image = document.createElement('img');

2) image.src = "http://www.somesite.com/someImage.jpg"; (some external image)

3) div.appendChild(image); (div being a div thats already appended to the DOM)

4) alert("Image Width: " + image.offsetWidth);

[B]5) alert("Image Width: " + image.offsetWidth);[/B] (new alert box)

Now I get this result:

1st alert box "Image Width: 0"

2nd alert box "Image Width: 266"

Does anyone know a way around this? I don't really want to keep popping up alert boxes for each image just to get the correct width.

@vwphillipsMay 29.2006 — #zxcimgsrc=new Image();

zxcimgsrc.onload=function(){ whatever }

zxcimgsrc.src='myimg.jpg';

@vitasnikauthorMay 29.2006 — #Thanks, that works much better now. Thanks for your help.

Nik

IMG – offsetWidth

5 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

IMG – offsetWidth

5 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

5 Comments(s) _↴

Also in #JavaScript _↴