View Full Version : Preventing multiple downloads of same image to be displayed in several places

12-20-2006, 05:26 AM

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/)


Mr J
12-20-2006, 03:12 PM
Try it this way

<TITLE>Document Title</TITLE>

<script type="text/javascript">
myImage=new Image()

function loadPics(){
for(var i=0;i<5;i++){ // change 5 to 36


<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">


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

12-21-2006, 12:07 PM
excellent. you just increased this page's download speed 36-fold!

much obliged.