Using Javascript to delay the Loading of Images

[sneakybeaky]

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

[Charles]

Originally posted by sneakybeaky
Any ideas welcome Leviticus XIX:35, NRSV
You shall not cheat in measuring length, weight, or quantity.Deuteronomy XXV:15-16, NRSV
You shall have only a full and honest weight; you shall have only a full and honest measure, so that your days may be long in the land that the LORD your God is giving you. For all who do such things, all who act dishonestly, are abhorrent to the LORD your God. Proverbs XX:10, NRSV
Diverse weights and diverse measures are both alike an abomination to the LORD. Micah 6:11, NRSV
Can I tolerate wicked scales and a bag of dishonest weights? And besides, what about the 13% of users who do not use JavaScript?

[sneakybeaky]

Useful points and very ably and appropriately put.

But, I'm still set on my course to use Javascript.

If I can encapsulate a slab of html in javascript, It makes it easier for the page to be written so that it still looks good to those without javascript enabled.