Preload images and page redirect

[mattwiw]

I'm looking to have a ten image slideshow that allows the images to have the style tag, position:absolute.

I've been through a couple of jQuery ones that didn't like the tag, and now I've been testing some Javascript ones.

This one works, but now I need to preload the images before it starts, or at least the first few and let the others catch up.

Each of the images are about 110kb, and they will switch every 1.5 seconds.

Additionally, would it be possible to have something at the end of the 10 slides execute a redirect to a new page?

The following Javascript drops directly into the BODY.

[quote]
<script language="JavaScript1.2">

var variableslide=new Array()

//variableslide[x]=["path to image", "OPTIONAL link for image", "OPTIONAL text description (supports HTML tags)"]

variableslide[0]=['../example1.jpg', '', '']
variableslide[1]=['../example2.jpg', '', '']
variableslide[2]=['../example3.jpg', '', '']
variableslide[3]=['../example4.jpg', '', '']
variableslide[4]=['../example5.jpg', '', '']
variableslide[5]=['../example6.jpg', '', '']
variableslide[6]=['../example7.jpg', '', '']
variableslide[7]=['../example8.jpg', '', '']
variableslide[8]=['../example9.jpg', '', '']
variableslide[9]=['../example10.jpg', '', '']

//configure the below 3 variables to set the dimension/background color of the slideshow

var slidewidth='130px' //set to width of LARGEST image in your slideshow
var slideheight='120px' //set to height of LARGEST image in your slideshow, plus any text description
var slidebgcolor='#F3F3F3'

//configure the below variable to determine the delay between image rotations (in miliseconds)
var slidedelay=1500

////Do not edit pass this line////////////////

var ie=document.all
var dom=document.getElementById

for (i=0;i<variableslide.length;i++){
var cacheimage=new Image()
cacheimage.src=variableslide[i][0]
}

var currentslide=0

function rotateimages(){
contentcontainer='<center>'
if (variableslide[currentslide][1]!="")
contentcontainer+='<a href="'+variableslide[currentslide][1]+'">'
contentcontainer+='<img src="'+variableslide[currentslide][0]+'" border="0" vspace="3">'
if (variableslide[currentslide][1]!="")
contentcontainer+='</a>'
contentcontainer+='</center>'
if (variableslide[currentslide][2]!="")
contentcontainer+=variableslide[currentslide][2]

if (document.layers){
crossrotateobj.document.write(contentcontainer)
crossrotateobj.document.close()
}
else if (ie||dom)
crossrotateobj.innerHTML=contentcontainer
if (currentslide==variableslide.length-1) currentslide=0
else currentslide++
setTimeout("rotateimages()",slidedelay)
}

if (ie||dom)
document.write('<div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+'"></div>')

function start_slider(){
crossrotateobj=dom? document.getElementById("slidedom") : ie? document.all.slidedom : document.slidensmain.document.slidenssub
if (document.layers)
document.slidensmain.visibility="show"
rotateimages()
}

if (ie||dom)
start_slider()
else if (document.layers)
window.onload=start_slider

</script>
[/quote]

Thanks for reading my post and for any help. Much appreciated.

[whoisgregg]

The script is actually set to preload the images already using this section of code:

for (i=0;i<variableslide.length;i++){ 
var cacheimage=new Image() 
cacheimage.src=variableslide[i][0] 
} 

With images that large, what you're probably seeing is an unavoidable delay as the browser loads all those files.

As far as sending a redirect at the end of the slides, you could add something like the code below into your rotateimages function:

 if(currentslide >= (variableslide.length - 1) ){ location.href = 'http://example.com'; }

[mattwiw]

Thanks for the help, I will give that a try.

The js does do an amazing job of preloading the images once it gets going, but the first couple on page-load essentially need to be preloaded before the timer/slides even starts.

[Fotiman]

The script you are using is very much outdated. Checking for document.layers or document.all has not been needed for years. Below is a reworked version. It's cleaner and adds a check to see if the image has loaded before trying to display it. I incorporated the suggestion above for the redirection.

Some things to note:
1. Don't use the language attribute on script element (it's invalid). Use the type attribute.
2. I removed all of the document.layers and document.all stuff
3. I wrapped the whole thing in an anonymous function to prevent polluting the global scope, and added 'var' declarations for some variables that were missing them.
4. It's worth noting that setting the width on the slidedom container doesn't ensure that the images will remain within that width.
5. I added a bunch of missing semi colons and added {} around if/else bodies (it's good practice, even if there is only 1 statement in the body)

<script type="text/javascript">
(function () {
var variableslide = [
    //["path to image", "OPTIONAL link for image", "OPTIONAL text description (supports HTML tags)"] 
    ['../example1.jpg', '', ''],
    ['../example2.jpg', '', ''],
    ['../example3.jpg', '', ''],
    ['../example4.jpg', '', ''],
    ['../example5.jpg', '', ''],
    ['../example6.jpg', '', ''],
    ['../example7.jpg', '', ''],
    ['../example8.jpg', '', ''],
    ['../example9.jpg', '', ''],
    ['../example10.jpg', '', '']
  ],
  slidewidth = '130px',  //set to width of LARGEST image in your slideshow 
  slideheight = '120px', //set to height of LARGEST image in your slideshow, plus any text description 
  slidebgcolor = '#F3F3F3',
  slidedelay = 1500;   // the delay between image rotations (in miliseconds) 
////Do not edit pass this line//////////////// 
var cacheimage,
  contentcontainer,
  crossrotateobj,
  currentslide = 0,
  i,
  ie = document.all, 
  dom = document.getElementById,
  n = variableslide.length;
// Preload images
for (i = 0; i < n; i++){
  cacheimage = new Image();
  // onload listener so we can tell when image has loaded
  cacheimage.onload = function (i) {
    return function() {
      variableslide[i][3] = true;
    }
  }(i);
  cacheimage.src = variableslide[i][0];
}
function rotateimages() {
  if (!variableslide[currentslide][3]) {
    // Image hasn't loaded yet, try again in a little bit
    setTimeout(rotateimages, 50);
    return;
  }
  contentcontainer = '<center>';
  if (variableslide[currentslide][1] != "") {
    contentcontainer += '<a href="' + variableslide[currentslide][1] + '">';
  }
  contentcontainer += '<img src="' + variableslide[currentslide][0] + '" border="0" vspace="3">';
  if (variableslide[currentslide][1] != "") { 
    contentcontainer += '</a>';
  }
  contentcontainer += '</center>';
  if (variableslide[currentslide][2] != "") {
    contentcontainer += variableslide[currentslide][2];
  }
  crossrotateobj.innerHTML = contentcontainer;
  if (currentslide >= variableslide.length - 1) {
    setTimeout(function() {location.href = 'http://example.com'}, slidedelay);
    return;
  }    
  else {
    currentslide++;
  }
  setTimeout(rotateimages, slidedelay);
} 
document.write('<div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+'"></div>');
function start_slider() {
  crossrotateobj = document.getElementById("slidedom"); 
  rotateimages();
} 
start_slider();
})();
</script>