Diashow Problem - Abfrage ob Bild vollständig geladen

[Html]

Hallo habe mir eine Diashow auf meiner Homepage gebastelt. Die Bilder wechseln immer im 4s Takt. Lokal aufm Rechner hat alles wunderbar geklappt. Nur online laufen die 4s Sekunden auch schon ab wenn das Bild noch gar nicht komplett geladen ist.

Nun habe ich mich etwas schlau gemacht und die Anweisung document.images[i].complete == true gefunden. Nur leider zeigt mir meine Diashow nur die ersten fünf Bilder und bleibt dann stehen.

Habe das ganze folgendermaßen eingebaut:

var i = opener.i;
images = opener.images
i2=images.length-1;
timer=null;
var ball = images.length-1;

function showPages()
{
	document.getElementById('pagediv').innerHTML = i+"/"+ball;
}


function previmg(val){
if (i > 1) {
if(!val){
i --;
document.img.src = images[i];
}
document.getElementById('previous').disabled=false;
document.getElementById('stopp').disabled=true;
}
if (i == 1)document.getElementById('previous').disabled=true;
if (i < i2){
	document.getElementById('next').disabled=false;
document.getElementById('start').disabled=false;
showPages();}

}
function nextimg(val){
if (i < i2) {
if(!val){
i ++;
document.img.src = images[i];

}
document.getElementById('next').disabled=false;
document.getElementById('stopp').disabled=true;
}
if (i > 1)document.getElementById('previous').disabled=false;
if (i == i2){document.getElementById('next').disabled=true;
document.getElementById('start').disabled=true;}

showPages();

}





function slideshow(val){

document.getElementById('start').disabled=true;
document.getElementById('stopp').disabled=false;
document.getElementById('next').disabled=true;
document.getElementById('previous').disabled=true;

if (document.images[i].complete == true) {
	timer=setTimeout("weiter();", 4000);
      } 


}



function weiter(val){
if (i < i2) {
if(!val){
i ++;
document.img.src = images[i];
slideshow(val); 
}

}

if (i == i2){
	if(timer != null) {
      clearTimeout(timer);
      timer=null;
    }
document.getElementById('stopp').disabled=true;
document.getElementById('previous').disabled=false;

}






showPages();

}





function stop(){
   
    if(timer != null) {
      clearTimeout(timer);
      timer=null;
    }
document.getElementById('start').disabled=false;
document.getElementById('stopp').disabled=true;

if (i < i2)document.getElementById('next').disabled=false;
if (i != 1)document.getElementById('previous').disabled=false;
}



window.onload=function(){previmg(1);nextimg(1);}

Also ohne die Abfrage funktioniert das ganze nur mit nicht richtig. Warum-bitte um Hilfe

mfg,Olli

 

[Html]

Habe gerade feststellen müssen, das die obige Anweisung gar nicht im Firefox funktioniert.
Gibt es denn noch eine Alternative dazu.

Also mein Problem sollte klar: In der Funktion slideshow läuft meine Zeit ab die nach Ablauf die Funktion weiter aufruft und so ein Bild weiter blättert.

Nun soll die Zeit aber erst neu ablaufen wenn das aktuelle Bild vollständig geladen ist.


Bestimmt kann mir jemand helfen, mfg Olli

 

[Html]

Also habe das ganze mal folgendermaßen probiert:

In der function weiter() die zeile images[i].onload = slideshow(val); eingebaut. Gehe ich richtig davon aus, dass der onload erst feuert wenn das Bild komplett geladen ist. Somit wird erst gewartet bis das neue Bild geladen ist und dann wird wieder die Zeit in der function slideshow ausgelöst.

Hier noch mal die function weiter()

function weiter(val){


if (i < i2) {
if(!val){
i ++;
document.img.src = images[i];
images[i].onload = slideshow(val);

}

}

if (i == i2){
	if(timer != null) {
      clearTimeout(timer);
      timer=null;
    }
document.getElementById('stopp').disabled=true;
document.getElementById('previous').disabled=false;

}



showPages();



}

Theoretisch ganz gut, klappt aber aufm Server nicht richtig - die Zeit läuft schon ab wenn das aktuelle Bild noch gar nicht richtig geladen ist. Und somit kann es sein das die Diashow bei der Hälfte des Bides schon zum nächsten wechselt.

Bitte bitte kann mir denn da wirklich keiner helfen?!

mfg,Olli

 

[Html]

So jetzt habe ich gedacht ich hätte die Lösung aber ein Problem jagt das andere.

Also habe mich nochmal schlau gemacht und gelesen das nach dem onload der Funktionsaufruf ohne Klammer stehen muss. Ansonsten wird nämlich dem onload der Wert der Funktion zugewiesen. So weit so gut.

Hier ist meine veränderte function weiter():

function weiter(val){


if (i < i2) {
if(!val){
i ++;
document.img.src = images[i];
document.img.onload =slideshow;

}

}

if (i == i2){
	if(timer != null) {
      clearTimeout(timer);
      timer=null;
    }
document.getElementById('stopp').disabled=true;
document.getElementById('previous').disabled=false;

}



showPages();



}

Also die Bedingung das die function slideshow aufgerufen wird, wird nun durch document.img.onload =slideshow; ausgelöst. So klappt es auch tatsächlich das erst wenn das bild komplet geladen ist die zeit wieder neu abläuft.

Nun mein neues Problem. Lasse ich die Diashow ablaufen-dann wird über einen Button zunächst ja die function slideshow angesprochen->danach gehts zur function weiter und das Spiel wiederholt sich bis Stop gedrückt wird oder das letze Bild geladen worden ist.
So also wenn ich die Diashow ablaufen lasse und dann nach ein paar Bildern wieder stoppe und dann manuel vor oder zurück blättern möchte springt sofort die function slideshow wieder an. Obwohl diese weder in nextimg oder previmg ausglöst wird.


Das ganze wird aber wohl durch die zeile document.img.onload =slideshow; ausglöst.
Aber wie ist das möglich, die zeile ist doch in einer funktion, warum wird die zeile ausgeführt obwohl die funtkion gar nicht angesprochen wurde?

Denn ohne diese Zeile im Code, kann nach stoppen der Diashow ganz normal manuell vor und zurück geblättert werden.


Bitte schaut euch doch mal mein Problem an, ich verzweifle langsam!


Gruß Olli