Only loading images when page has fully loaded

[videoexp]

Hi all,

I need to create a JavaScript that will only begin loading images after the page has fully loaded. This way, the browser will quickly load the text, and while the reader is reading the text, the browser will load the pictures. I'm guessing that a document.write method is the only way to do this.

I have tried many methods, but with limited to no success. One of these was this:

1. For each image, I would write this code inside the BODY:
<SCRIPT LANGUAGE="javascript">
function loadPica() {
document.write("<a href=pagea.htm><img src=pica.jpg width=100 height=50 alt='Page 1' border=4></a>");
}
</SCRIPT>

<SCRIPT LANGUAGE="javascript">
function loadPicb() {
document.write("<a href=pageb.htm><img src=picb.jpg width=100 height=50 alt='Page 2' border=4></a>");
}
</SCRIPT>

And so forth...

Then, just before the </BODY> tag, I would call the function for each pic:

<script language="Javascript">
<!--
loadPica();
loadPicb();
//-->
</script>

But this would just result in partially rendered pages.

Any help is greatly appreciated.

Thank you.

[mf22cs]

You could use DOM... I think...

Just make "placeholders", for exemple empty <span>-tags that you give an ID.

Then you find that placeholder with:

pic = document.getElementById("name");
pic.innerHTML="<img src="pic.gif">";

Something like that... I think...

Comments?

/Marcus

[videoexp]

Thank you for your reply, Marcus

That looks like a great way to do it.

I forgot to mention though, that I'm trying to get all this to work in older browsers such as Netscape 4.7, which doesn't support innerHTML as far as I know. :/

Cheers,
Don