View Full Version : Can I PreLoad images in slideshow?

09-12-2007, 12:57 PM
Im not all that experienced with website creation, but I managed to put together a manual slideshow for a photographer's site. Only issue is that
photos seems to take a few seconds to load each time the arrow is clicked.
Is there something I can add to my script to preload the images to they load faster?
The second time thru the slideshow goes way faster, so I thought this might help if there is a way to do it. Ive read some about preloading, but dont know where or how.....thanks!
Here is the page Im working on. also, any other helpful advice is welcome.

09-12-2007, 01:05 PM
see http://www.dynamicdrive.com/dynamicindex4/preloadimage.htm

09-12-2007, 01:11 PM
Thanks, that looks pretty cool. So I do one of these for each gallery page?

09-12-2007, 01:19 PM
yes, however instead of putting the javascript on every page, you can put the script itself in its own file...
something like


then just include it in the head of your gallery page

<script type="text/javascript" src="scripts.js"></script>

just be sure that the file name lines up

09-12-2007, 01:32 PM
Ok, this is going to show my inexperience and lack of knowledge on this but.......not sure what you mean by this one.
"just be sure that the file name lines up"

09-12-2007, 01:41 PM
from that page, extract all of the javascript... open up a text-editor (eg... notepad) paste the javascript code... save it as some file name

open up the gallery page in a text-editor, in the <head> tag put

<script type="text/javascript" src="file name.js"></script>

that is what I mean. the name of the external script file, and the name of the call inside the page, need to be the same

09-12-2007, 01:53 PM
ok, I understand that. If I may, another question though.

So if I save the preload script on a separate text edit file as you suggest....
....The preload script you linked to calls for me to add the URL of the page it goes to and all the images for that page.

So....do I need to save a separate text editor file for each gallery page I create?
Does this question make sense?

09-12-2007, 01:59 PM
nope you just need to tweek the code

var yourImages = new Array("http://yourdomain.com/test1.gif","http://yourdomain.com/test2.gif")

take that line out of the script and place it in the gallery page.

<script type="text/javascript" src="filename.js">
var yourImages = new Array('image1.jpg', 'image2.gif', etcetc);

09-12-2007, 02:10 PM
Ok, I see.
What about this line in the script though...

var locationAfterPreload = "http://dynamicdrive.com" // URL of the page after preload finishes

I will have several gallery pages so how will that work if I have one file with this script?

Again, thanks so much for this help!

09-12-2007, 02:26 PM
oops yah. put that underneath the yourImages.... sorry

09-12-2007, 02:38 PM
ok, cool! I think I can handle this........i hope.
Thank you!

09-12-2007, 02:48 PM
One more question?
Where should I place the blue and black Gif files that I downloaded.

09-12-2007, 03:15 PM
where ever you want... just make sure the url in the script is correct, same as with the rest of the images... you need to put the correct path to the image.
you can either do a relative location or absolute.

okay say you were at the address
your images are in the directory

relative path = dependant upon the location of the script.
1) if the image is in the same folder, you could do


2) if the image is in a subfolder of the current folder....
eg (http://www.mydomain.com/galleries/galleryA/)


3) if the image is in the folder above the current one
eg (http://www.mydomain.com/)


4) if the image is in a sub-folder of the folder above the current one
eg (http://www.mydomain.com/images/)


as you can see those can get confusing if you ever need to change / move around some scripts, so I always try to use something that I call an absolute relative path, which defines the path after the domain known more technically as the document root
eg (http://www.mydomain.com)

1) /galleries/image1.gif
2) /galleries/galleryA/image1.gif
3) /image1.gif
4) /images/image1.gif.

or an absolute path, which would include the entire domain and path.... which typically is only used when attempting to reference an image/script that is not hosted on your server


which method you choose is up to you, but i always try to assign the absolute relative path names for any file that i am including whether it's an image or not, that way I will be totally certain that if i need to move the script around, i do not need to change all these extra pages, or wondering if its going to be in the right place here, and not there.... etcetc..

09-12-2007, 03:30 PM
Got it. Man, youre good!

09-12-2007, 08:58 PM
Is it possible to use this preload script but not have the loading bar show up. Just have it go directly to the gallery page? Making the preload virtually unknown to the viewer?

09-12-2007, 09:08 PM
then it wouldn't be "pre-loading" them, it would just be loading them as the page is rendered

09-13-2007, 03:07 AM
then it wouldn't be "pre-loading" them, it would just be loading them as the page is rendered

...and so I presume that wouldnt speed up the images loading as the viewer clicks thru them? So if I want that to be the case I need to use the "pre-loading" page. I will give it a try.

03-12-2008, 03:14 AM
Okay, so I followed this and completed all the steps (excepting the gifs for the download bar) and all that...but now 2 of my 3 preloaded images--all of which are animated gifs--load all at once instead of going through their (short) animations. However, the third image (the first animation to be seen--the large logo and slogan), which has a significantly longer animation, loads like it should.

The url: http://www.geocities.com/kes_web_cnc/clients/A_Shining_Moment

I'd greatly appreciate some insight into what's causing this problem.