Detecting "image loaded successfully"

I have a page with content.
Upon a certain action, two images get updated/replaced.
Because the images are on another server, it sometimes takes a couple of seconds.
* I would like to block specific actions (click on a button/other image) UNTIL the images are loaded.
* How do I detect when the images are done loading?
Something like readyState, complete, or something?
Any advice?

Thanks in advance.

For a single image, I use:

<img src="target.gif" width="8" height="8" onload="ItsOK();" onerror="ItsBad();" />

The website is dynamic. That's why I need to use JavaScript.

Let's say we have:
<img id='orimg' src='http://www.currentsite.com/img/item01.jpg' />

and we change it using JavaScript:
<script type="text/javascript">
function changePic() {
var imgobj = document.getElementById('orimg');
imgobj.src = 'http://www.othersite.com/img/item01.jpg';
}
</script>

Is there a property I can check, to check the state (loading, loaded, error) ?

You can reference an individual image with:

document.images['imageID']

One of its properties is "complete" but I can't seem to reference it directly. Hmmm.