HTML image render notification

Question

In one webpage, I have a big image to load and other contents. Sometimes the image takes longer time to load and I would like to track that. Is there any means by which I can get notified using Javascript when browser completely renders the image?

EDIT

I use the following code to load the image.

<table border="0" style="background-image: url(http://abc.com/abc.jpg);" id="imageDisp">
</table>

SOME More UPDATE
Is there any simple way to know how long the image took to render? Using the javascript I am getting a notification that the image is loaded now, is there a way to know when the image load started? So that the elapsed time can be calculated?

Answer 1

You can hook on the load event of the <img> element. E.g.

<img src="http://upload.wikimedia.org/wikipedia/commons/3/31/Atlantic_hurricane_tracks.jpg" 
    onload="alert('finished!');">

Jsfiddle demo.

---

Update:

Then create new Image() instead (the average browser is smart enough not to request the same image twice and multiple references will point to the same image request):

<script>
    var img = new Image();
    img.src = 'http://upload.wikimedia.org/wikipedia/commons/3/31/Atlantic_hurricane_tracks.jpg';
    img.onload = function() { 
        alert('finished!');
    }
</script>

Another jsfiddle demo (don't forget to clear browser cache, the same image might be already cached :) ).