How to know when you have received an image in the browser?

Question

Let me explain myself as my question title may be a tad random. My website has a good few images, as such I want to have say a loading bar that as my browser receives and image it moves the bar x pixels to the right. Now the css behind it all isn't to bad. The problem I'm having is with JavaScript how one would determine when the how image has been obtained in the browser? So when all the images have loaded I can simply just show a neat page with out the user seeing all these images slowly download on their screen. Something similar to the following site:

Link

Or even I'm completely wrong here? How is the above link achieving this? Any tutorials would be a great help. As I tried googling "HTML Loading pages" This really is my first time doing this ever.

Answer 1

If you are using jQuery then please use load event on image selector like

 $(function(){
   $("#image").bind("load", function(E){
     alert("Load");
   });
 });

Or you can also use onload JavaScript event

document.getElementById('image').onload = function(){alert("Load");}