Does this slide shows benefit from preloading?

[chesneil]

I'm using the Left-Right Image Slide Show from Dynamic drive:

http://www.dynamicdrive.com/dynamicindex14/leftrightslide2.htm

My images (photos) are gifs (9 of them) about 35k a piece. I was wondering if I can/should preload the images, by using:

function preLoad(){
pic1=new Image(175,191);
pic1.src="photos/pic1.gif";
etc
}

with an onLoad event in the body tag?

My questions are:
(1) Is it unnecessary because the array somehow prompts their preloading?
(2) If not, as each picture is displayed for 3 seconds, couldn't that time be used getting the next one ready?
(3) Or does the slide show simply wait until the next is loaded anyway, and you CAN'T preload/it makes no difference?
(4) It slows things down?

Trying it out doesn't help because on my own machine there's already no delay. Not sure how it all works ...thinking about dial-ups, which naturally leads to the last question:

(6) Can the slower connections adequately download images of the sizes mentioned above without the need to help?

Hope someone can enlighten me.
Thanks for any help.
Chesneil

[neil.c]

your questions:

(1) preloading is useful, otherwise you might end up having every picture being downloaded in front of the user - very messy and unprofessional.

(2) 3 seconds isn't long enough for 35k by a normal 56k dialup, you will have to preload them.

(3) i haven't looked at the script, but it is possible to wait until an image is downloaded by putting an onload event handler into the <img> tag.

(4) preloading doesn't take any longer than loading when you need the image, it just means the loading is all done in advance.

(5) to test it, you'll have to upload it to the web and keep clearing your cache.

(6) any connection can download any size file, but 35Kb on my pc (56kbit/s modem, avg transfer rate about 35kbit/s) would take 8 seconds.

i would recommend you start with one image shown normally, then preload all the others, then start the slideshow.

[chesneil]

Thanks a lot for replying, neil.c. Very useful reply-I'll see what I can do with it.

One more question: I found the images to be a bit too big for my layout so shrunk them. They're now 12.6k each. Any idea how long that would take to download on your modem? Hopefully fast enough that the slide show will work 'as is'..??
Regards,
Chesneil

[neil.c]

that'd take me almost exactly 3 seconds, that would be similar to most other modem users.

but remember, if you don't preload the image at all, when you display it it will be downloaded on screen. with this sized image, it might be best to start preloading one as soon as the previous one is displayed.

i'll have a look at that script and see what i can do with it.

[neil.c]

i've had a go with that script putting my own images in (about 9k each) and found that the first two always download in the background, but after that every new image starts downloading when it first becomes visible, without any background loading at all. this means i got image placeholders appearing - very messy.

but i don't want to mess around with the script cos it uses divs and layers which i don't know much about, and i don't understand exactly how the script works.

the good thing with this script is that after the first round, all the images are loaded and the slideshow goes seamlessly.

if you do want to preload your images (and get rid of any placeholders), you might want to ask someone with a bit more expertise with divs and layers.

good luck:thumbsup:.

[chesneil]

neil.c
Many thanks for taking the trouble to actually upload and try it for me. I really appreciate it. I'll have a look and see what I can do, but as a beginner to javascript... I'm thinking it may be easier to look for another script! Unfortunately I only have to make the top page, which includes this slide show, so I can't pre-load on a previous page.

Oh well, there goes my weekend :(

Cheers,
Chesneil

[neil.c]

i too called myself a beginner only a week or two ago...

i can probably fix you a script for an 'instant swap' slideshow that does all the required preloading - i want one for my site too so maybe i'll be able to kill two birds with one stone. but I won't be able to do the left-right slidey thing - that needs a proper dhtml expert. i'll see what i can do.
:thumbsup:

[neil.c]

this is a slideshow script that does a background preload of the next image every time the image is changed. also, if any image doesn't download before it is needed, the script will wait for it. therefore the user will see a perfectly clean slideshow, however slow their connection. or that's the theory.

it doesn't do any fancy sliding things yet but others might be able to add that.

also it's not cross-browser compatible yet, it uses the getElementById() method which needs a version 4 browser or better (i think). the dd left-right slideshow script also used document.all and so it was probably more compatible.

here is the complete html page:

<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE>patient preloading slide show</TITLE>
<script language=javascript>
<!--
/*
slideshow script by neil clements (neil.c at codingforums.com)
with help from javascriptkit.com and codingforums.com.
i have tried to make the script as readable as possible.
use and modify as you wish but please credit to my name.

this script creates an image slideshow. the images are shown
one by one every 3 seconds. each time the image changes, the
next image is preloaded. if an image does not preload before
it is needed, the script will wait for it. this means the user
will never see partially loaded images.

the script needs two <img> tags in the HTML of the web page:

• one must have the attribute id="imgSlideShow", this is the
image where the slideshow will appear. set formatting
properties as per any normal image, but you do not have to
set a src.

• the other must have an id="imgNextImage", this is used to
download the next image. this image should be hidden,
for example in a <div> in negative space.
*/

var vURL = new Array() //leave this alone

//image url list - change to your own pictures, any number.
vURL[0] = "image1.jpeg"
vURL[1] = "secondpicture.gif"
vURL[2] = "picture3.jpg"
vURL[3] = "pic4.jpeg"
//end list

var vDelay = 4000 //enter normal time delay, in milliseconds.

////leave the rest alone unless you know what you're doing.
//initialise variables
var vCount = vURL.length
var vCurrent = 1 //current image to download.
var vImgReady = false
var vTimeReady = false

//run body onload.
function fStart() {
var imgSS = document.getElementById("imgSlideShow")
var imgNext = document.getElementById("imgNextImage")
imgSS.src = vURL[0] //load first image straight into slideshow.
var vTimeReady = false //next image not downloaded.
var vImgReady = false //time delay not up.
setTimeout("fTimeReady()", (1.5 * vDelay)) //wait.
imgNext.src = vURL[vCurrent] //start downloading next image.
}

function fSwapImage() {
var imgSS = document.getElementById("imgSlideShow")
var imgNext = document.getElementById("imgNextImage")
vCurrent ++ //increment counter
if (vCurrent == vCount) {
vCurrent = 0 //if on last image, loop back to first.
}
imgSS.src = imgNext.src //copy new image to slideshow.
vTimeReady = false //time delay not up.
setTimeout("fTimeReady()", vDelay) //wait.
vImgReady = false //next image not downloaded.
imgNext.src = vURL[vCurrent] //start downloading next image.
}

function fImgReady() {
/* when next image is preloaded, if time delay complete
then show image. otherwise, wait for time delay. */
if (vTimeReady)
fSwapImage();
else
vImgReady = true;
}

function fTimeReady() {
/* when time delay complete, if next image downloaded then
show image. otherwise, wait for next image to download. */
if (vImgReady)
fSwapImage();
else
vTimeReady=true;
}
//-->
</script>
</HEAD>
<BODY onload="fStart()">

<!--slide show image tag is below:-->
<img id="imgSlideShow" border=2>

<!--preloading image is in div in negative space.-->
<div style="position:absolute; left:-2000; top:0">
<img id="imgNextImage" onload="fImgReady()">
</div>
<!--end of invisible div-->

</BODY>
</HTML>

good luck getting it to work.:thumbsup:

[chesneil]

Thanks neil.c.

You may be interested in another script I found which is cross-browser and pre-loads images. The only thing you may not like is that the images are loaded randomly, but that's fine for my purposes. I've used it on my page (in a table) and it works fine.

You can put messages under each picture, but I didn't want them and found you can leave them out by just deleting them (i.e. leaving them blank) BUT leaving the | marks (otherwise you get 'not defined' messages).

I haven't copied the code here because there's a load of info on the pages, a working example, and the choice of download (with example pics) or cut 'n paste of the code. I don't seem to be able to post the specific url either - it just takes you to the top page. So here are the directions:

http://www.24fun.com
On the right in the box labelled FREE SCRIPTS click on 'image'. There are various slideshows, but the one I'm referring to is called 'Random Order Slideshow with Corresponding Messages'.

As I say, it seems to work fine and although I haven't uploaded it to try, I'm prepared to take their word for it about the preloading...:)

Hope this is of help
Chesneil