PDA

View Full Version : Can I PreLoad images in slideshow?



PES
09-12-2007, 12:57 PM
HI,
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.
http://www.staceydoylephotography.com/AnneMorgan.html

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

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

boogyman
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

scripts.js

then just include it in the head of your gallery page


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

just be sure that the file name lines up

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

boogyman
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

PES
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?

boogyman
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);
</script>

PES
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!

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

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

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

boogyman
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
http://www.mypdomain.com/galleries/galleryA.html
your images are in the directory
http://www.mydomain.com/images/

relative path = dependant upon the location of the script.
1) if the image is in the same folder, you could do
eg(http://www.mydomain.com/galleries/


image1.gif

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


galleryA/image1.gif

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


../image1.gif

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


../images/image1.gif


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
or
2) /galleries/galleryA/image1.gif
or
3) /image1.gif
or
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


http://www.mydomain.com/images/image1.gif



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

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

PES
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?

boogyman
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

PES
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.

Kestrana
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.

Thanks,
Kes