As the page loads, two variables are declared, imagesLoaded and imagesTotal. Since later on there’s a calculation containing imagesLoaded / imagesTotal you can’t let imagesTotal be zero. (Theoretically can’t happen, but you want to be careful.)
Once the DOM is available, a function is attached to each IMG element’s load event, in which imagesLoaded is incremented and the progress bar is updated. As each image loads, it triggers the attached function which updates the progress bar with the new % loaded value.
When imagesLoaded == imagesTotal, all images have loaded and triggered the load function, so we can hide the progress bar and show the page’s contents.
For fun, click an image.
This page uses jQuery and the Progress Bar Plugin from http://digitalbush.com/.