GeoffHart
asked on
Making images download only once
I have a list that I'm building dynamically that contains about 200 entries. Beside each item, I place 3 hyperlinked images. It looks to me like web browsers are downloading these 3 images once for each record, not once for each page. This makes the download time on a modem around 1 minute.
The html for the page is about 5K, the images are around 2k combines, the reported page size when it downloads is about 200 kb.
- The images are included using the usual <img src> tags.
- The list is build in a Perl script that is included using SSI
- The webserver is Apache for linux
Anyone know how I can get the browser to download these images only once?
Thanks!
The html for the page is about 5K, the images are around 2k combines, the reported page size when it downloads is about 200 kb.
- The images are included using the usual <img src> tags.
- The list is build in a Perl script that is included using SSI
- The webserver is Apache for linux
Anyone know how I can get the browser to download these images only once?
Thanks!
What about pre-loading the images...
Pre-load an image...
<script>
image1 = new Image();
image1.src = "some.gif";
</script>
This will load them into the cache... ready for display.
Pre-load an image...
<script>
image1 = new Image();
image1.src = "some.gif";
</script>
This will load them into the cache... ready for display.
Or this way if pre-loading does the job...
<script language="JavaScript"><!--
if (document.images) {
var img1 = new Image();
img1.src = 'http://www.domain.com/path/image1.gif';
var img2 = new Image();
img2.src = 'http://www.domain.com/path/image2.gif';
// ... etc for all your other images
}
// --></script>
<script language="JavaScript"><!--
if (document.images) {
var img1 = new Image();
img1.src = 'http://www.domain.com/path/image1.gif';
var img2 = new Image();
img2.src = 'http://www.domain.com/path/image2.gif';
// ... etc for all your other images
}
// --></script>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Agreeing with Corey...
test your script by printing the time in HTML comments at the beginning and end.
Why not post your URL?
test your script by printing the time in HTML comments at the beginning and end.
Why not post your URL?
Or, copy the source after it has downloaded, paste it into a new html page and view it to see how long it takes without script processing.
ASKER
I couldn't post the actual script, since it is build using data from a confidential database. When I was producing the test script which I was going to link to demonstrate the problem, I noticed the error.
It turns out, the HTML page was only 5 kb and the 3 images were downloaded once. What happened is that the script also produces a javascript which consists of around ten lines. This got included one level of brackets too deep, and got spooled out 200 times onto the page (140kb of code!).
I also checked the script generation time, it was < 1 second.
Thanks everyone for your help.
It turns out, the HTML page was only 5 kb and the 3 images were downloaded once. What happened is that the script also produces a javascript which consists of around ten lines. This got included one level of brackets too deep, and got spooled out 200 times onto the page (140kb of code!).
I also checked the script generation time, it was < 1 second.
Thanks everyone for your help.
Pre-load an image...
<script>
image1 = new Image();
image1.src = "some.gif";
</script>
This will load them into the cache... ready for display.