Javascript img onload

Question

I have something like this:

<img class="side_image right" id="side_image" src="http://path/to/file_large.jpg" width="300" 
height="210" onload="document.getElementById('loading_gif').style.display = 'none';"  />

My problem is how to determine if an image exists. This block of code will hide the gif loading only when the image is loaded. But when there really is no image ... I am stuck in loading a gif. I still want to display something, even if there is no image and gif display = 'none' is loading;

Do you have any suggestions using only your own javascript / html or php. There are no jquery or other javascript libraries because we are not allowed to use these tools.

Thank...

Answer 1

onload = function() {
    var imageRef = document.getElementById('blah');
    imageRef.onerror = function(){
       this.src='blah.gif';
    }
}

Answer 2

Compose the answer ...

<img src="image_to_load.jpg" onload="..." ... onerror="this.src='alternate_image.jpg';" />