Golgi: window.setTimeout ie8

Hallo,
ich hab schon seit längegerm ein Problemchen und find keien Lösung dazu.
Bei diesem script soll sich ein bild über den bildschirm bewegen. Wenn ich einen Pfeil rechts vom bild anfahre, wird die funktion move_right() aufgerufen, wenn ich einen pfeil links anfahre, die Funktion move_left(). Das Bild wird dann nach rechts bzw. nach links bewegt. Verlasse ich die Pfeile, wird die Funktion beende aufgerufen und die Bewegung stoppt. ganz zu beginn nach dem laden der seite wird die Funktion groeße() aufgerufen, die das Bild läd und position und größe davon bestimmt.

var comic = new Image;  
var comic_rahmen;  
var comic_id;  
var breite;  
var flag_1=0;  
var l=0;  
var r;  
var dl=5;  
var dr=5;  
  
  
  
function groeße(id_c, id_r){  
	comic = document.getElementById(id_c);  
	comic_ramhmen = document.getElementById(id_r);  
	breite = comic.width;  
	r = breite-500;  
	//alert(r);  
}  
  
  
function move_right()  
{  
	flag_1=1;  
	right();  
}  
  
function right()  
{  
	if (flag_1 == 0 || r <= 0)  
		{  
			return;  
		}  
		  
	r=r-dr;  
	l=l-dl;	  
	move(l);  
	window.setTimeout('right()',10);  
}  
  
function move_left()  
{  
	flag_1=1;  
	left();  
}  
  
function left()  
{  
	if (flag_1 == 0 || l >= 0)  
		{  
			return;  
		}  
		  
	r=r+dr;  
	l=l+dl;	  
	move(l);  
	window.setTimeout('left()',10);  
}  
  
  
function move(x)  
{  
	comic.style.left = x+"px";  
}  
  
function beende()  
{  
	flag_1=0;  
}  

Das skript läuft im internet explorer 8 extrem langsam, in anderen browsern dagegen so wie ich es möchte.

Weiß jemand, wie ich das lösen kann?
Irgendwie gehen muss es ja, bewegte Bilder und Animationen anderer websites mit javasctipt stocken ja auch nicht.
Besten Dank im Voraus.

  1. Hi,

    var comic = new Image;

    Was soll das bewirken? Du machst mit diesem Image-Objekt nichts, sondern überschreibst es gleich in groeße wieder.

    window.setTimeout('right()',10);

    10 Millisekunden sind für eine Animation kein besonder geeigneter Wert.
    Kino und Fernsehen arbeiten mit nur bis zu 30 Bildern pro Sekunde - weil unser Auge schnellere Veränderung sowieso nicht mitbekommt.
    Du verbrätst mit einem so kleinen Intervall eigentlich nur unnötig Performance.

    Das skript läuft im internet explorer 8 extrem langsam, in anderen browsern dagegen so wie ich es möchte.

    Bis auf die genannten Punkte fällt mir spontan am Script nichts auf.
    Sicher, man könnte es kompakter und „cleverer“ schreiben - Bewegung nach links oder rechts unterscheidet sich bspw. nur durch ein Vorzeichen, also braucht es dafür kaum zwei separate Funktionen.

    Hast du mal ein Online-Beispiel?

    MfG ChrisB

    --
    RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
    1. Hallo,
      danke für die schnelle Antwort. Die Punkte, die du erwähnt hast hab ich korriegiert, leider gehts aber nicht flüssiger.
      Momentan kann ich dir leider keinen Link zum online-Beispiel schicken, das wird wohl erst in ein paar tagen wieder gehen.
      Kann das Problem evtl in dem doctype oder etwas ähnlichem liegen? Bin noch ziemlicher Anfänger in der Webprogrammierung und blick bei so manchem noch nicht so ganz durch, das evtl unerwünschte Seiteneffekte haben könnte.

      Vielleicht nützt die Info, dass der ie8 nicht schneller als in Intervallen von ca. 150ms weiterrückt. Die Prozessorauslastung leigt beim ausführen des skripts im ie8 auch höher als in anderen browsern. interessanterweise funktioniert es auch in älteren Versionen des ie.

      Grüße.

      1. Da ich derzeit die seite nicht online stellen kann, hier der html code:

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
          
        <html xmlns="http://www.w3.org/1999/xhtml">  
          
        <head>  
        	<meta content="de" http-equiv="Content-Language" />  
        	<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />  
        	<title>Startseite</title>  
        	  
        	<style type="text/css">  
        		@import url('style.css');  
        	</style>	  
        	  
        	<script type="text/javascript" src="javascript/comic.js"></script>  
        </head>  
          
          
        <body onload="groeße('comic', 'Comic_Start')">	  
        	<div id="Fenster_Praesentation">  
        		<div id="Pfeillinks" >  
        			<img  
        				onmouseover="move_left()"  
        				onmouseout="beende()"  
        				src="links.gif"  
        				id="links"  
        				alt=""  
        			/>  
        		</div>  
          
        		<div id="Comic_Start">  
        			<img  
        				src="comic.gif"  
        				id="comic"  
        				alt=""  
        			/>  
        		</div>			  
        		  
        		<div id="Pfeilrechts">  
        			<img  
        				onmouseover="move_right()"  
        				onmouseout="beende()"  
        				src="rechts.gif"  
        				id="rechts"  
        				alt=""  
        			/>  
        		</div>  
        	</div>  
        </body>  
          
        </html>  
        
        

        herzlichen Dank für die Hilfe.

        1. Hi,

          Da ich derzeit die seite nicht online stellen kann,

          Von der Ausrede halte ich generell nicht viel ... hier gilt immer noch: Wenn du Hilfe bekommen willst, mach es den potentiellen Helfern bitte so einfach wie möglich.

          Gut, eine Ausnahme davon könn(t)en wir mal machen -

          hier der html code:

          <style type="text/css">
          @import url('style.css');
          </style>

          <script type="text/javascript" src="javascript/comic.js"></script>

          • aber mir den Inhalt dieser Ressourcen auch noch selber ausdenken zu müssen, übersteigt dann doch etwas den Aufwand, den ich zu betreiben bereit bin.

          MfG ChrisB

          --
          RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?