I've just finished creating an image upload feature and am a little disappointed.
Whilst visiting a page that contains one or more photos, I am experiencing:
1. Progressive JPEG
To avoid the "top to bottom" loading of an image you may use "progressive jpeg" which renders a "blurred" version of the picture during it's loading instead of "top to bottom" : Ex. : http://blog.patrickmeenan.com/2013/06/progressive-jpegs-ftw.html
2. Embedded (encoded in base64)
If you really want to show images and the page at the same time you should encode them as base64 and include them in your page :
<img src="data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAADIA..." alt="" />
You can do it via PHP or any server side script.
<img src="data:image/jpeg;base64,<?=base64encode(file_get_contents($file_path))?>" alt="" />
3. Disguised as stylesheets (awful hack)
If you want to reaaaaally block rendering before images are loaded, you could double images in your page in a
<link rel=stylesheet> tag in the
<head> section of your page.
Browsers won't show the page until CSSs are loaded, even though your files are not CSS it will load and cache them, and once loaded the page will render and your images will be loaded from cache.
<html> <head> <link rel="stylesheet" href="your_image_01.jpg" /> <link rel="stylesheet" href="your_image_02.jpg" /> </head> <body> ... <img src="your_image_01.jpg" alt="" /> ... <img src="your_image_02.jpg" alt="" /> ... </body> </html>