Christian W: Slideshow erst nach einem Reload möglich

Hallo,

ich habe eine Slideshow mittels Javascript programmiert, die jedoch erst nach einem Reload der Seite (nicht Neustart des Browsers) funktioniert. Die funktioniert startSlideshow() wird immer erst nach einem Reload ausgeführt, weswegen ich dachte, es sei ein Fehler in der check()-Funktion, aber ich wüsste nicht wo.

Was meint ihr?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
  "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
	<meta http-equiv="Content-Type" content="text/html; charset:utf-8">  
	<title>Slideshow</title>  
	<script type="text/javascript">
		const MAX = 4;  
		var curImg = 0;  
		var images = new Array(MAX);  
		var done = new Array(MAX);  
		var obj; //= document.getElementById("slideshowImg");  
		  
		function onLoad()  
		{  
			obj = document.getElementById("slideshowImg");  
  
			//alert("start now");  
			//alert(obj.id);  
			for(i = 0; i < MAX; i++)  
			{  
				images[i] = new Image();  
				images[i].src = "./images/" + i + ".jpg";  
				  
				done[i] = false;  
				  
				setTimeout("check(" + i + ")", 10);  
			}  
		}  
		  
		function check(imgNum)  
		{  
			//alert("start check " + imgNum);  
			if(images[imgNum].complete == true)  
			{  
				alert(imgNum + "isComplete");  
				done[imgNum] = true;  
				checkAll();  
			}  
			else  
			{  
				//alert("else setTimeout")  
				setTimeout("check(" + i + ")", 10);  
				alert("call check(" + i + ")");  
			}  
		}  
		  
		function checkAll()  
		{  
			//alert("checkAll");  
			for(i = 0; i < MAX; i++)  
			{  
				if(done[i] == false)  
				{  
					return;  
				}  
			}  
  
			alert("start slideshow");  
			startSlideshow();  
		}  
		  
		function startSlideshow()  
		{  
			//alert("start slideshow");  
			obj.src = images[0].src;  
			curImg++;  
			  
			window.setInterval("nextImage()", 5000);  
		}  
		  
		function nextImage()  
		{  
			//alert("nextImage " + curImg);  
			if(curImg >= MAX)  
			{  
				curImg = 0;  
			}  
			  
			obj.src = images[curImg].src;  
			curImg++;  
		}
	</script>  
</head>  
<body onload="onLoad()">  
	<div id="slideshow">  
		<img id="slideshowImg" src="" alt="">  
	</div>  
</body>  
</html>

Wenn ich es (dank der alerts) richtig verstanden habe, wird check() ausgeführt, obwohl die Slideshow schon läuft. Das könnte den Fehler verursachen. Ich weiß nur nicht wieso, da ich ja die checkAll-Funktion habe, die ja rein theoretisch startSlideshow() nur ausführen sollte, wenn wirklich alle als geladen markiert sind. :/

Danke,

Gruß
Christian

  1. Hallo,

    Wenn ich es (dank der alerts) richtig verstanden habe, wird check() ausgeführt, obwohl die Slideshow schon läuft. Das könnte den Fehler verursachen.

    Ja: In onLoad() wird auf jeden Fall für jedes Bild ein Timeout für check() gestartet.

    check() ruft dann ggf. checkAll() auf, welches ggf. die slideshow startet. Zu diesem Zeitpunkt (alle geladen) können aber die weiteren Aufrufe von check() (durch onLoad) noch "unterwegs" sein, und somit passieren dann natürlich noch weitere Aufrufe von checkAll() und dann auch wieder startSlideshow() usw.

    Dass die sich in die Quere kommen, wundert mich nicht.

    Gruß, Don P

    1. Nabend,

      Ja: In onLoad() wird auf jeden Fall für jedes Bild ein Timeout für check() gestartet.

      check() ruft dann ggf. checkAll() auf, welches ggf. die slideshow startet. Zu diesem Zeitpunkt (alle geladen) können aber die weiteren Aufrufe von check() (durch onLoad) noch "unterwegs" sein, und somit passieren dann natürlich noch weitere Aufrufe von checkAll() und dann auch wieder startSlideshow() usw.

      Deswegen existiert ja checkAll(). Es soll überprüft werden, ob jedes Element geladen ist. Es startSlideshow() also nur ausgeführt werden, wenn wirklich alles geladen ist.

      Grund scheint scheinbar Zeile 34 zu sein. Die Fehler-Konsole sagt mir folgendes:

      Fehler: images[imgNum] is undefined
      Quelldatei: file:///home/christian/Programmierung/javascript/slideshow/index.html
      Zeile: 34

      Es ist mein liebster Fehler in Javascript: Zugriffsfehler! Gibt es in JS nicht irgendwie etwas wie Pointer, parent oder sonst so etwas?

      Danke,

      Gruß
      Christian

      1. Hallo,

        Deswegen existiert ja checkAll(). Es soll überprüft werden, ob jedes Element geladen ist. Es startSlideshow() also nur ausgeführt werden, wenn wirklich alles geladen ist.

        Ja, aber das kann schneller der Fall sein, als du denkst (Bilder schon im Cache z.B.). Wenn in onLoad bereits beim ersten Bild alles geladen ist, wird für die anderen trotzdem nochmal gecheckt, ob es so ist, und dann wieder die Show gestartet. So lese ich jedenfalls den Code.

        Grund scheint scheinbar Zeile 34 zu sein. Die Fehler-Konsole sagt mir folgendes:

        Fehler: images[imgNum] is undefined
        Quelldatei: file:///home/christian/Programmierung/javascript/slideshow/index.html
        Zeile: 34
        Es ist mein liebster Fehler in Javascript: Zugriffsfehler! Gibt es in JS nicht irgendwie etwas wie Pointer, parent oder sonst so etwas?

        Pointer? Um Gottes Willen, nein! Nur Referenzen. JS ist nicht C...

        Es gibt eigentlich auch keine Konstanten in JS, jedenfalls nicht in ECMAScript.
        Variablen sind entweder global oder lokal, je nachem ob man var davorschreibt oder nicht. const wird nicht von allen Browsern unterstützt (meines Wissens nur von Mozilla). Vielleicht ist das dein Problem.

        Gruß, Don P

  2. Hallo Christian,

    Bilder kennen auch einen onload.

    Gruß, Jürgen