How can I hide a page contents until all the images are fully loaded?

Question

I am trying to optimize a site which loads terribly. I already reordered, compressed and minified js and css, but the biggest problem are the images. This site has some real

Answer 1

First important thing to check - make sure the images are cacheable. Sometimes caching of images is disabled. The way to check this is a direct call to the webserver:

 telnet localhost 8080
 GET /images/flibble.gif HTTP/1.0

And see what is returned. It should return something like Expires: or Cache-Control.

This page seems to describe it well: http://www.web-caching.com/mnot_tutorial/how.html

The other trick is to specify the size of the images in the tag. This vastly improves performance because the browser doesn't need to wait until the page is loaded.