Javascript img onload

Question

Hi! 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 tell if the image does not exist. This block of code will hide the loading gif only if the image is loaded. But when there is really no image...I'm stuck with the loading gif. I still want to display something even if there is no image and set loading gif display = 'none';

Do you have any suggestions with just using native javascript/html or php. No jquery or other javascript libraries 'cause we're not allowed to use those tools.

Thanks...

Answer 1

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

Answer 2

To build off mender's answer...

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