Background Image Slideshow

[snaich]

Background Image Slideshow
......................................

<script language="JavaScript1.2">

//Background Image Slideshow- © Dynamic Drive (www.dynamicdrive.com)
//For full source code, 100's more DHTML scripts, and TOS,
//visit http://www.dynamicdrive.com

//Specify background images to slide
var bgslides=new Array()
bgslides[0]="bgslide01.jpg"
bgslides[1]="bgslide02.jpg"
bgslides[2]="bgslide03.jpg"

//Specify interval between slide (in miliseconds)
var speed=5000

//preload images
var processed=new Array()
for (i=0;i<bgslides.length;i++){
processed[i]=new Image()
processed[i].src=bgslides[i]
}

var inc=-1

function slideback(){
if (inc<bgslides.length-1)
inc++
else
inc=0
document.body.background=processed[inc].src
}

if (document.all||document.getElementById)
window.onload=new Function('setInterval("slideback()",speed)')

</script>

......................................

hi, i found this script and would like to use it -
when i load the site there is no picture -
it takes too much time before the slideshow starts.
is it possible to delete the preload time ?
(all pictures are still preloaded on the site before)

[jscheuer1]

The preload will take no time if the images are already loaded. Even if they're not loaded, the script doesn't wait until they are to start. The delay is because the script uses setInterval(), which waits until the first interval has passed to do anything. There's a way around that. And, if you put the script as the last thing before the closing </body> tag, you don't even need to wait for the window to load either. I'm taking your word for it that the images are already loaded, but it doesn't really matter. If you make these changes and the images aren't ready yet, it will just take until they load to show up. Background images have no layout and show no broken image tokens, so things will be OK until they do show up.

OK, for the first part, change this:


if (document.all||document.getElementById)
window.onload=new Function('setInterval("slideback()",speed)')

to:


if (document.all||document.getElementById)
window.onload=function(){slideback(); setInterval(slideback, speed);};

If you place the script as the last thing before the closing </body> tag, you can change it to:


if (document.all||document.getElementById){
slideback();
setInterval(slideback, speed);
}

and it will start even faster. But the images will only show up if they're truely loaded. If not though, they will have plenty of time to load with 5000 milliseconds between image changes. In any case things should be a bit faster than the original script.

Also a fine point - the language attribute for the script tag has been deprecated, and most DOCTYPES require the type attribute. You should change:


<script language="JavaScript1.2">

to:


<script type="text/javascript">