View Full Version : Detecting "image loaded successfully"

12-21-2006, 01:58 PM
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.

12-21-2006, 02:29 PM
For a single image, I use:

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

12-21-2006, 03:09 PM
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';

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

12-21-2006, 03:28 PM
You can reference an individual image with:


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