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.