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.

 

link to original page would be useful....

 

No, can't do.
It's a beta-site, only for invited people.

Let's say we have:

<img id='orimg' src='http://www.currentsite.com/img/item01.jpg' />

HTML:

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>

HTML:

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

 

I'm not sure (this is only an idea): maybe testing for image height or witdh, you'll get undefined or real values. ???

 

<script type="text/javascript">
   function changePic() {
      var imgobj = document.getElementById('orimg');
      imgobj.src = 'http://www.othersite.com/img/item01.jpg';
     
      imgobj.onload = function()
      {
            alert('Do whatever');
      }
   }
</script>

Code (javascript):