Preventing multiple downloads of same image to be displayed in several places

TripperTreats

12-20-2006, 04:26 AM

Hello,

So I need to create an image with Javacript: var img = new Image().
Its source will change every now and then. The catch is, I need to display that image in several places on my page using document.write. All I can think of is

document.write('<img id="test1" src="'+img.src+'");
...
document.write('<img id="test2" src="'+img.src+'");The problem is, the browser loads a copy of img each time I try to display it in these placeholders. On my particular page, I have up to 36 copies of that image that I need to display, so that it downloads 36 copies of it! I know there is an easier way to do this. Any help would be much appreciate. The applicable page is

www.trippertreats.com/Products/Teachers/ (http://www.trippertreats.com/Products/Teachers/)

Thanks!

Mr J

12-20-2006, 02:12 PM

Try it this way

<HTML>
<HEAD>
<TITLE>Document Title</TITLE>

<script type="text/javascript">
myImage=new Image()
myImage.src="image.jpg"

function loadPics(){
for(var i=0;i<5;i++){ // change 5 to 36
document.images["pic"+i].src=myImage.src
}
}

</script>

</HEAD>
<BODY onload="loadPics()">

5 of the 36 images<br>

<img name="pic0" src="blank.gif">
<img name="pic1" src="blank.gif">
<img name="pic2" src="blank.gif">
<img name="pic3" src="blank.gif">
<img name="pic4" src="blank.gif">

</BODY>
</HTML>

Create a 1px X 1px blank gif to use as default

TripperTreats

12-21-2006, 11:07 AM

excellent. you just increased this page's download speed 36-fold!

much obliged.