Javascript Image objects not loaded

So, basically this is the problem.

I have this...
<div id="mainframe">
<img src="image.jpg" id="image">
</div>

Then when I try to in a function say...

function checkImage()
{
var image = document.getElementById("image");
var height = image.height;
}

--------------
Many times the image height will not be defined.

I recently changed the past so it uses AJAX to change the <img src...
stuff to return new data for that inner HTML block..

Still the image will not have properties.
Now, this is a problem in IE/FF, but not in opera.

Any ideas on how to make sure the image is loaded so its height/width
properties are available... either by swapping the image.src or by
using ajax to swap out the div innerHTML??

guywmustang said the following on 9/2/2006 3:06 AM:

So, basically this is the problem.

I have this...
div id="mainframe"
img src="image.jpg" id="image"
/div

Then when I try to in a function say...

function checkImage()
{
var image = document.getElementById("image");
var height = image.height;
}

--------------
Many times the image height will not be defined.

It will be defined, it just won't be defined when you try to call it.

I recently changed the past so it uses AJAX to change the <img src...
stuff to return new data for that inner HTML block..
Still the image will not have properties.
Now, this is a problem in IE/FF, but not in opera.

Any ideas on how to make sure the image is loaded so its height/width
properties are available... either by swapping the image.src or by
using ajax to swap out the div innerHTML??

Use the onload of the img to make sure it is loaded.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

The onload is exactly what I needed! Thanks!

I don't know all the javascript events and such, so this is a good
forum to turn to thanks to the people here!