Using Javascript to delay the Loading of Images

We are trying to improve the usability of our website, and its performance rating, by delaying the insertion of elements in the DOM of our homepage until the rest of the page has loaded.

For example, if our homepage contains the html:

<tr>
<td width=37 height=1> <img src=”http://www.consumer.philips.com/repositories/HomePage/en_GB/CE/b2c_bullet_v1/images/spacer.gif” width=37 height=1></td>
</tr>

I have found that if we rewrite it like this:

<tr>
<script language=”JavaScript”>document.write(‘<td width=37 height=1> <img src=”http://www.consumer.philips.com/repositories/HomePage/en_GB/CE/b2c_bullet_v1/images/spacer.gif” width=37 height=1></td>’)</script>
</tr>

…The image is not downloaded until the rest of the page has been loaded, and the download time of the image is not included in the performance measurement of the page.

How can we make it so that a larger, multi-line slab of html is delayed in its insertion into the DOM until the rest of the page has been loaded?

Any ideas welcome

Also in #JavaScript _↴