You could use a table to represent the blue instead of an image.

You should be able to update the column width property via javascript to make it look more or less loaded.

something like
<table width=100 bgcolor='silver'>
<tr>
<td width=50 bgcolor='blue' id='width'></td>
<td>
</tr>
</table>
would look 50% loaded.
Then manipulate the column 'width' value width and you should be rocking.

Check out:
http://www.js-examples.com/example/?ex=894&mode=1

You could probably create a single function which reads the current width of 'width' and increments it by 100/#images. If you then call that function from the finished loading event of all images it aught to provide a rough estimate.