Javascript setTimeout und Firefox

[sukka]

Hallo Freunde des Webentwickelns,

kann mir jemand verraten, was ich tun muss, damit der Firefox auf der Seite

http://www.freakline-tattoo.de/index.php?layout=links

schneller wird und die Aktionen, die er auch tut mit der gleichen Geschwindigkeit ausführt, wie jeder andere Browser auch?

Hier der Code des Javascripts:

Code: Alles auswählen

		<script type="text/javascript">
				var myTime = "off";
				function increaseImageSize(image)
				{
					var img = image;
					var elm = document.getElementById(img);
					if(elm.height < 90 && myTime == "off")
					{
						elm.style.height = (elm.height + 4) + 'px';
						elm.style.width = (elm.width + 10) +  'px';
						setTimeout("increaseImageSize('" + img + "')", 10 + "ms");
					}
				}
			   
				function decreaseImageSize(image)
				{
					
					var img = image;
					var elm = document.getElementById(img);
					if(elm.height > 60)
					{
						elm.style.height = (elm.height - 4) + 'px';
						elm.style.width = (elm.width - 10) + 'px';
						myTime = setTimeout("decreaseImageSize('" + img + "')", 10);
					}
					else //if(elm.height <= 60)
						myTime = "off";
				}
			   
		</script>

[sukka]

So, ich habs jetzt mit JQuery gelöst, das läuft besser und schneller als mein Code, wahrscheinlich ists auch sauberer implementiert, dennoch ruckelt es im Firefox, allerdings nicht mehr so wie mein Code...

neue Funktionen:

Code: Alles auswählen

		function inc(elm) 
		{
			$(elm).stop();
			$(elm).animate({width: '380px', height: '92px', marginTop: '-16px', marginBottom: '-16px'}, 250);
		}
		function dec(elm) 
		{
			$(elm).stop();
			$(elm).animate({width: '300px', height: '60px', marginTop: '0px', marginBottom: '0px'}, 250);
		}

Falls jemand irgendwelche Verbesserungsvorschläge hat zu dem, was ich da hab, möge er mir bitte bescheid sagen...

Grüße,

Sukka

[Xin]

Ich habe hier keinen Firefox, deswegen konnte ich das auch nicht testen.

Heute früh konnte man jedoch nicht von einem Icon auf's nächste gehen, das zweite Icon reagierte dann nicht mehr. (Opera)
Sogesehen sieht es jetzt besser aus.

Allerdings empfinde ich den Effekt eher als Aufdringlich und die beiden Buttons unten bekommen einen Zitter

[sukka]

Ja die Buttons zittern, da ich kein Margin von nem halben Pixel anschalten kann

Workaround: Dem Container mit dem Bild ne feste Höhe geben, dann ruckelts nicht im FF, da der die Seite nicht neu berechnet von der Grafikkarte bekommt...

[Dominik]

Was macht das JS auf deiner Seite?

[sukka]

Wenn ich die Frage richtig verstanden habe:

Das Javascript wird beim Mouseover und Mouseout getriggert. Sobald die Maus über eines der Bilder geführt wird vergrößert sich das Bild automatisch bis zu einem gewissen Grad (Höhe und Breite werden an die "size" Funktion der jquery übergeben), sobald die Maus wieder vom Bild entfernt wird verkleinern sich die Bilder wieder auf die ursprüngliche Größe, alles in einem zeitlichen Intervall von 250ms

Das ist die Vergrößerungsfunktion:

Code: Alles auswählen

		function inc(elm) 
		{
			$(elm).stop();
			$(elm).animate({width: '380px', height: '92px'}, 250);
		}

und das die Verkleinerungsfunktion:

Code: Alles auswählen

		function dec(elm) 
		{
			$(elm).stop();
			$(elm).animate({width: '300px', height: '60px', marginTop: '0px', marginBottom: '0px'}, 250);
		}

JQuery kümmert sich um die zeitlichen Intervalle und um die Zwischenschritte.

Aufgerufen werden die Funktionen über <img>-Parameter onMouseOver und onMouseOut

Code: Alles auswählen

<div class="links" style="height:78px">
			<a href="http://www.wildbodystore.de" target="blank">
				<img border="0" id="img0" src="images/banner/wildbodystore.jpg" onMouseOver="inc(this)" onMouseOut="dec(this)" alt="WildBodyStore Tattoo Piercing">
			</a>
		</div>

Grüße,

Sukka

[Dirty Oerti]

Also bei mir (Firefox 4 Beta 12 Ubuntu amd64) scheint das ganze ordentlich zu funktionieren. Zumindest jetzt. Heute früh hatte es geruckelt, aber jetzt funktioniert es.
Eine andere Sache: ich persönlich finde es sehr verwirrend, dass die Überschriften (über den Bildern) nicht anklickbar sind, obwohl sie doch fast so aussehen, wie deine Buttons in der Menuleiste.

[Dubbel]

Bei mir (Ubuntu 10.04 und FF 3.6.13, 1.7 GHz) läuft alles flüssig, auch kein Zittern bei den unteren Bildern.

Ich kenne allerdings das Problem, das FF bei Javascript etwas langsamer als andere Browser ist. In FF4 soll das aber nach meinen Informationen geändert und eine Chrome-ähnliche Prozessstruktur eingeführt werden.

[sukka]

Im Kontext der Seite erschließt sich der Zusammenhang,

Links sind mit weißer Schrift unterlegt und bei Mouseover wird die Schrift schwarz, Text ist in der Hintergrundfarbe gehalten und verändert die Farbe nicht beim Drüberfahren. Aber dem Hinweis werde ich möglicherweise noch folgen.

Grüße,

Sukka

[bbbl]

Heyho,

da nun eh schon jQuery auf deiner Seite verwendest, solltest du keine Event-Handler-Attribute wie onmouseover mehr verwenden. Kleines Beispiel, nicht getestet:

Code: Alles auswählen

$(function() {
	$('.links img').hover(
		function() { // increase
			$(this).stop().animate({width: '380px', height: '92px'}, 250);
		},
		function() { // decrease
			$(this).stop().animate({width: '300px', height: '60px', marginTop: '0px', marginBottom: '0px'}, 250);
		}
	);
});

Ich kenne allerdings das Problem, das FF bei Javascript etwas langsamer als andere Browser ist In FF4 soll das aber nach meinen Informationen geändert und eine Chrome-ähnliche Prozessstruktur eingeführt werden.

Dass das UI (und die Add-Ons) ihren eigenen Prozess bekommen, bringt sicher auch was in Sachen Performance, ausschlaggebender werden in dem Fall hier aber eher die neuen sog. Retained Layers und die Hardwarebeschleunigung sein..