At this moment I found two options, to solve this problem:
The initial src of all images to be a data base 64 blank image
This option not only requires a modern browser, but it can be slower on the client side since the browser must base-64 decode the image data in order to produce the image.
The initial src of all images to be an url of a blank 1x1 image
It's an O.K. move provided that the blank image URL for all image slots is exactly the same URL and that it has a long cache lifetime defined in the HTTP header "cache-control". The problem with this is that as the new image files load, the image squares will jump to the new size which could make the user experience not as wonderful.
The almost perfect idea is this...
When page starts up, present a grid with fixed-size boxes that can accomodate each image. It is ok if the entire grid does not fit on the screen. Then create javascript that executes after the HTML loads, and in that javascript, create a new image element and attach it to each cell of the grid then set the source of the image to the correct image file. Do this until the first screen fills up. then detect scrolling within javascript and then when scrolling happens, repeat the above process for the new cells.
Now if you want the best of the best, and quality isn't a huge concern, then what I recommend (that I also implemented on my site) is to construct a grid and set it such that the background image of that grid is a sprite sheet of all of the images formatted as squares of images. This method is flexible and fast to load since one request is required for all images.
Here's a template HTML to use if you want to go the fast route. Only two requests are made. The HTML code, and the one image. In this code, I assume each image from the sheet is 100 pixels in width and 200 pixels in height and that each image is perfectly aligned next to each other with no gaps.
<html>
<head>
<style type="text/css">
#imagegrid {background-color: black; background-image:url('http://example.com/url/to/imagesheet.jpg');}
A {display:block;width:100px;height:200px;margin:10px;float:left;}
#image1{background-position: 0px 0px}
#image2{background-position: 100px 0px}
#image3{background-position: 200px 0px}
...
#imageN{background-position: XXXpx 0px}
</style>
</head>
<body>
<div id="imagegrid">
<a href="image_one.htm" id="image1"></a>
<a href="image_two.htm" id="image2"></a>
<a href="image_three.htm" id="image3"></a>
...
<a href="image_N.htm" id="imageN"></a>
</div>
</body>
</html>
In my code I added 3 dots. That means you can keep adding images by incrementing the numbers and by incrementing the position by 100 each time provided that your sprite sheet has only one row of images. Also, with some browsers such as Opera, you might need to add a negative sign in front of the background position values to get them to work.