PDA

View Full Version : How to load images for one page already in previous page?


kippie
03-01-2002, 04:39 PM
My site consists of a file2.html with a lot of pictures. The intro of the site is a file1.html consisting of a movie made with CoffeeCupFirestarter (swf-file). The end of the movie in file1 is linked to file2 so that the user is redirected. In order to make loading of all images in file2 faster, the images are loaded already in file1 so that they are cached and the user can get them in file2 from cache. Now I still have the problem that loading images in file 2 takes too long. Below I made simple examples of file1 en file 2. Can anyone please tell me if I do this correct, can do it better, in another way or whatsoever?
file1.html:
<html>
<head>
<script language="JavaScript"><!--
function getImages() {
alt1 = new Image();
alt1.src = "image1.jpg";
alt2 = new Image();
alt2.src = "image2.jpg";
alt3 = new Image();
alt3.src = "image3.jpg";
}
// -->
</script>
</head>
<body onload="getImages()">
<!-- Created with CoffeeCup Firestarter http://www.coffeecup.com -->
<object classid="clsid 27CDB6E-AE6D-11CF-96B8-444553540000" codebase="http://active.macromedia.com/flash2/cabs/swflash.cab#version=4,0,0,0" id="schommelproef9" width="950" height="700">
<param name="movie" value="schommelproef27.swf">
<param name="quality" value="high">
<param name="loop" value="false">
<embed src="../../Exper%20Folder/exper3/schommelproef27.swf" loop="false" quality="high" width="950" height="700" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">
</object>
</body>
</html>

file2.html:
<html>
<head>
<script language="JavaScript"><!--
function getImages() {
alt1 = new Image();
alt1.src = "image1.jpg";
alt2 = new Image();
alt2.src = "image2.jpg";
alt3 = new Image();
alt3.src = "image3.jpg";
}
// -->
</script>
<script language="JavaScript"><!--
function changeImg(id,imgName){
document.images[id].src=eval(imgName+".src");
}
// -->
</script>
</head>
</head>
<body background="image0.jpg" onload="getImages()">
<table width="500" height="300">
<tr>
<td><img src="image1.jpg"><img src="image2.jpg"></td>
</tr>
</table>
</body>
</html>

Mark
03-01-2002, 04:46 PM
try using this script: http://www.a1javascripts.com/essential_scripts/preloader/preloader.html

kippie
03-02-2002, 05:05 AM
Thanks, but I cannot open the zip-file. Something seems to be wrong.
Kippie

Ian
03-02-2002, 05:37 AM
Hi kippie,
Not sure what seems to be wrong, I just checked the file and downloaded it and all seems to work ok here. Here is the script Mark suggested.

COPY AND PASTE INTO HEAD OF PAGE.
=================================================

<script language=javaScript>
//from www.a1javascripts.com
<!--//
//pre loader
newimage0 = new Image();
newimage0.src = "FIRST-IMAGE.gif";
newimage1 = new Image();
newimage1.src = "SECOND-IMAGE.gif";
//-->
</script>

=================================================
TO ADD MORE IMAGES, SIMPLY ADD

newimage2 = new Image();
newimage2.src = "THIRD-IMAGE.gif";
newimage3 = new Image();
newimage3.src = "FORTH-IMAGE.gif";

and so on...
Hope this helps.
good luck

kippie
03-02-2002, 06:27 AM
Thanks Ian
Kippie