avoid showing incremental rendering of picture table

Question

i have a website that displays pictures in an html table. When i click on the page, it shows it incrementally loading and resizing the table based on the picture sizes.

Is there a better way to do this so i either:

wait and show the table once after its ready to rend to avoid the incremental loading: showing some "loading . ." update until it fully renders

Answer 1

Specify the height and width of each image as part of the HTML tag (whether it be through CSS or the height/width attributes of the img tag itself). That way the browser knows how much screen space to allocate for the image (and thus how to lay out the page) before it completely downloads the image file.

This is even part of Google's PageSpeed optimization recommendations.

Answer 2

You might want to look into the technique of "CSS sprites". This is a CSS trick that lets you merge several images into one big file that gets downloaded all at once, but still displays as separate images on the page.