Optimering af slideshow - skal loades hurtigere
Hej eksperterJeg har modificeret nedenstående script, som jeg har hentet gratis fra www.peters1.dk.
Det fungerer på den måde, at der på min side kan hentes flere forskellige serier af billeder, der så kan åbnes i et slideshow.
Lige nu afvikles slideshowet helt perfekt. Det eneste problem er, at hvis en serie af billeder er meget stor, tager det relativt lang tid at hente slideshowet. Se mit eks. nedenfor, hvor jeg har smidt 50 forskellige billeder ind i array'et, der indeholder billede-filerne.
<script language="javascript" type="text/javascript">
////////////////////////////////////////////////////////////////
// Javascript made by Rasmus Petersen - http://www.peters1.dk //
////////////////////////////////////////////////////////////////
var SLIDE_billede = new Array("","001.JPG","002.JPG","003.JPG","004.JPG","005.JPG","006.JPG","007.JPG","008.JPG","009.JPG","010.JPG","011.JPG","012.JPG","013.JPG","014.JPG","015.JPG","016.JPG","017.JPG","018.JPG","019.JPG","020.JPG","021.JPG","022.JPG","023.JPG","024.JPG","025.JPG","026.JPG","027.JPG","028.JPG","029.JPG","030.JPG","031.JPG","032.JPG","033.JPG","034.JPG","035.JPG","036.JPG","037.JPG","038.JPG","039.JPG","040.JPG","041.JPG","042.JPG","043.JPG","044.JPG","045.JPG","046.JPG","047.JPG","048.JPG","049.JPG","050.JPG");
var SLIDE_text = new Array("","001","002","003","004","005","006","007","008","009","010","011","012","013","014","015","016","017","018","019","020","021","022","023","024","025","026","027","028","029","030","031","032","033","034","035","036","037","038","039","040","041","042","043","044","045","046","047","048","049","050");
var SLIDE_load = new Array();
var SLIDE_status = 'SLIDE_pause';
var SLIDE_timeout;
var SLIDE_aktuel = 1;
var SLIDE_speed = 3000;
var SLIDE_fade = 2;
for (i = 1; i <= SLIDE_text.length-1; i++)
{
SLIDE_load[i] = new Image();
SLIDE_load[i].src = SLIDE_billede[i];
}
var SLIDE_antal = SLIDE_billede.length-1;
function SLIDE_start()
{
document.getElementById('SLIDE_pause').disabled = true;
document.images.SLIDE_billedeBox.src = SLIDE_load[SLIDE_aktuel].src;
document.getElementById("SLIDE_textBox").innerHTML= SLIDE_text[SLIDE_aktuel];
}
function SLIDE_play()
{
document.getElementById('SLIDE_play').style.display='none';
document.getElementById('SLIDE_play_disabled').style.display='';
document.getElementById('SLIDE_pause').style.display='';
document.getElementById('SLIDE_pause_disabled').style.display='none';
SLIDE_aktuel++;
SLIDE_slide();
SLIDE_status = 'SLIDE_play';
SLIDE_timeout = setTimeout("SLIDE_play()",SLIDE_speed);
}
function SLIDE_pause()
{
clearTimeout(SLIDE_timeout);
SLIDE_status = 'SLIDE_pause';
document.getElementById('SLIDE_play').style.display='';
document.getElementById('SLIDE_play_disabled').style.display='none';
document.getElementById('SLIDE_pause').style.display='none';
document.getElementById('SLIDE_pause_disabled').style.display='';
}
function SLIDE_tilbage()
{
clearTimeout(SLIDE_timeout);
SLIDE_aktuel--;
SLIDE_slide();
if (SLIDE_status != 'SLIDE_pause') SLIDE_timeout = setTimeout("SLIDE_play()",SLIDE_speed);
}
function SLIDE_fem_tilbage()
{
clearTimeout(SLIDE_timeout);
SLIDE_aktuel--;
SLIDE_aktuel--;
SLIDE_aktuel--;
SLIDE_aktuel--;
SLIDE_aktuel--;
SLIDE_slide();
if (SLIDE_status != 'SLIDE_pause') SLIDE_timeout = setTimeout("SLIDE_play()",SLIDE_speed);
}
function SLIDE_frem()
{
clearTimeout(SLIDE_timeout);
SLIDE_aktuel++;
SLIDE_slide()
if (SLIDE_status != 'SLIDE_pause') SLIDE_timeout = setTimeout("SLIDE_play()",SLIDE_speed);
}
function SLIDE_fem_frem()
{
clearTimeout(SLIDE_timeout);
SLIDE_aktuel++;
SLIDE_aktuel++;
SLIDE_aktuel++;
SLIDE_aktuel++;
SLIDE_aktuel++;
SLIDE_slide()
if (SLIDE_status != 'SLIDE_pause') SLIDE_timeout = setTimeout("SLIDE_play()",SLIDE_speed);
}
function SLIDE_slide()
{
if (SLIDE_status != 'SLIDE_pause')
{
// et eller andet
}
if (SLIDE_aktuel > (SLIDE_antal)) SLIDE_aktuel=1;
if (SLIDE_aktuel < 1) SLIDE_aktuel = SLIDE_antal;
if (document.all)
{
document.images.SLIDE_billedeBox.style.filter="blendTrans(duration=2)";
document.images.SLIDE_billedeBox.style.filter="blendTrans(duration=SLIDE_fade)";
document.images.SLIDE_billedeBox.filters.blendTrans.Apply();
}
document.images.SLIDE_billedeBox.src = SLIDE_load[SLIDE_aktuel].src;
if (document.getElementById) document.getElementById("SLIDE_textBox").innerHTML= SLIDE_text[SLIDE_aktuel];
if (document.all) document.images.SLIDE_billedeBox.filters.blendTrans.Play();
}
function SLIDE_hastighed(SLIDE_valgt)
{
SLIDE_speed = SLIDE_valgt.options[SLIDE_valgt.selectedIndex].value;
}
var play_val = 0;
var pause_val = 1;
function CheckKeys(){
var key = event.keyCode;
if (key == 32){
if (play_val == 0) {
document.play_img.src = slideshow_play_down.src;
document.pause_img.src = slideshow_pause.src;
play_val = 1;
pause_val = 0;
SLIDE_play();
} else if (pause_val == 0) {
document.play_img.src = slideshow_play.src;
document.pause_img.src = slideshow_pause_down.src;
play_val = 0;
pause_val = 1;
SLIDE_pause();
}
event.cancelBubble = true;
event.keyCode = 0;
return false;
} else if (key == 37) {
SLIDE_tilbage();
event.cancelBubble = true;
event.keyCode = 0;
return false;
} else if (key == 38) {
SLIDE_fem_tilbage();
event.cancelBubble = true;
event.keyCode = 0;
return false;
} else if (key == 39) {
SLIDE_frem();
event.cancelBubble = true;
event.keyCode = 0;
return false;
} else if (key == 40) {
SLIDE_fem_frem();
event.cancelBubble = true;
event.keyCode = 0;
return false;
}
}
document.onkeydown = CheckKeys;
</script>
Mit spørgsmål er, om man kan sætte scriptet til kun at hente det valgte billede ("001.JPG") plus (f.eks.) de fem næste ("002.JPG","003.JPG","004.JPG","005.JPG","006.JPG") plus de fem forrige ("046.JPG","047.JPG","048.JPG","049.JPG","050.JPG") billeder?
Når scriptet går til næste billede ("002.JPG") skal det så hente "007.JPG" og smide "046.JPG" væk igen etc.
Det hele skal ske uden at siden skal reloade på nogen måde - alt skal afvikles lokalt på brugerens maskine, så siden kun skal loade én gang.
Forståeligt? Ellers må jeg prøve at uddybe mig yderligere :)
