View Full Version : Image width/height not re-read?

11-08-2006, 07:12 PM

On my website I have images with variable width and height.
I have Javascript code that get the width and height of the image in question with:

var windowWidth=pic.width
var windowHeight=pic.height

This works perfectly. Yesterday, I decided to put the exact same images larger on my web server, and when I look at my website, the content of the variables windowWidth and windowHeight show the values of the old files. Is this normal?
How to force to READ the image size instead of getting it from a "cache", or is there a workaround? Even when the Temporary Internet Files are cleared, the problem persists. Stronger, the problem even persists when looking the web from the files on the computer. If I rename the image files, the problem is gone. What am I missing?

I would be very grateful for any help about this incredible problem.


11-08-2006, 08:32 PM



11-08-2006, 09:10 PM
Thank you brandonH, replacing with .width with .offsetWidth is highly probably what I was missing. However, in the below function, it does not work. There is an error message from IE saying that 'preloaded[...].src' is null or not an object. Any suggestion?

function xim(n)
{ // image from array
var picName=preloaded[n].src
var windowWidth=preloaded[n].offsetWidth
var windowHeight=preloaded[n].offsetHeight
showit(picName, windowWidth, windowHeight)

11-08-2006, 09:32 PM
unfortunately, you cannot do so.....

the values in the array preloaded[ ] are only strings, not actual objects.
the .offsetWidth and .offsetHeight are only good for actual objects.

I would recommend displaying the image first, then resizing the window.
that way the image is loaded into the page ( now an actualy object ) which you can then get the width and height from.

11-08-2006, 09:45 PM
there is an alternative though, but it requires that you know the images dimensions already. basically they have to be yoru images, that you know exactly how big they are.

if (document.images){
preloaded= new Array();
preloaded[0]= new Image();
preloaded[1]= new Image();
function xim(n)
{ // image from array
var picName=preloaded[n].src;
var windowWidth=preloaded[n][1];
var windowHeight=preloaded[n][2];
showit(picName, windowWidth, windowHeight)

if you set the height and width inside the array, you then have a hiehgt and width value to work with before displaying the image. which means you can open up a window, then load the image.

11-08-2006, 10:10 PM
Of course, if the dimensions were known, it would be really easy to add them as parameters. This is what I have done before, but a computer is there to help the humans, and facilitate their job. So, the computer should determine himself the size of the image, which vary from image to image. With preloaded[n].width it worked perfectly until I uploaded the same image with a larger size on the web server.
Because offsetWidth works only on actual objects as you told me, I was wondering if there was a way to create an invisible object, to get its size, then clear this object?
Or, is there a way to clear the cache or buffer or whatever where the size of the image is stored? Deleting the Temporary Internet Files and/or rebooting the computer has no effect. I have made some inquiries with Google, but not sure what it does:
<meta http-equiv="pragma" content="no-cache">

If there is absolutely no way to get the size of a dynamical image with just the filename stored in an array, my only option for now is to rename the files so their sizes are not yet known.

11-08-2006, 10:57 PM
there is a way to do what you ask.

if you create an <img> tag like so:

<img src="yourfile.jpg" style="visibility:hidden;">

i would say do style="display:none;"
but that pulls the object out of the page, there for the .offsetWidth or height would return as 0.

the visibility leaves the object where it is, but it still takes up that space in the document.

another option would be to have an iframe that is 0 x 0. (doesnt display).
then load the image into the contents of the iframe dynamically. the grab the height and width.

create thiese pages to see:

main page:


<input type=button onclick="getDimensions('projects/closeup1.jpg');">
<input type=button onclick="getDimensions('projects/closeup2.jpg');">

<iframe name=IF1 src="blank.htm" width=0 height=0></iframe>

<script type=text/javascript>
function getDimensions(SRC){

IF1.document.getElementById('div1').innerHTML="<img id=hidimage src='"+SRC+"'>";
var width=IF1.document.getElementById('hidimage').offsetWidth;
var height=IF1.document.getElementById('hidimage').offsetHeight;
alert(width+' x '+height);



iframe code:


<div id=div1></div>

11-11-2006, 02:16 PM
Thank you very much brandonH. You have been nominated.