# Buttonwechsel ziemlich laggy / langsam, Lösung parat?



## tribunmaster (27. September 2004)

Hallo

Habe vor kurzem meine 1. Seite so gut wie fertiggestellt, nun ist es so das die Buttons sich per Javascript, bei Rollover verändern (Bildwechsel)...

Meine Frage ist nun, ob man den Bildwechsel bei Rollover nicht beschleunigen kann, weil so wie es atm ist, kommt der Rollovereffekt ziemlich schleppend rüber:

http://www.rennmauszucht-berlin.de/index_andre.htm <- auf enter klicken!

Habe aber schon einige Seiten gesehen, wo der Wechsel wesentlich schneller vonstatten ging, von daher musses irgendwie gehen, den Rollovereffekt zu beschleunigen. Am Webspace sollte es nicht liegen, der ist ansonsten recht fix...

Wäre super wenn der eine oder andere nen Tip parat hätte...

mfg
Andre


----------



## Coranor (27. September 2004)

Des Loesungs Antwort waere die Bilder "preloaden" zu lassen. ich frage mich allerdings warum so ein Javascript-Preloader bereits in Deinem Quelltext vorhanden ist, Du ihn aber nicht benutzt. Nun gut, die Funktion heisst MM_preloadImages(), Du musst sie nur noch mittels onload im body-Tag aufrufen und die Bildnamen uebermitteln, das sollte den gewuenschten Effekt herbeifuehren.


```
<body onLoad="MM_preloadImages('bild01.jpg', 'bild02.jpg')">
```

Ich hoffe mal der Code stimmt, ist schon eine Ewigkeit her, dass ich den Proloader bzw. auch Javascript benutzt habe


----------



## Thomas Lindner (27. September 2004)

Wie schon gesagt Preloader nutzen...

Aber ich wollte was anderes posten:

Nimms mir nicht übel, aber wenn du meinst schon uns sagen zu müssen :



> <- auf enter klicken!



sollte du über deine Usability / Navigation nochmal nachdenken!

LG Thomas


----------



## tribunmaster (27. September 2004)

Erstmal danke für die Antworten wobei ich aus letzteren Beitrag von Thomas nicht ganz schlau werde...

das "<- auf enter klicken!" war sicher nicht böse gemeint, als Ich darauf hinwies, ka warum Ich's tat...vestehe deine Reaktion diesbezüglich nicht so ganz aber egal thx für die Antworten...

mfg
Andre


----------



## Thomas Lindner (27. September 2004)

> _Original geschrieben von tribunmaster _
> *Erstmal danke für die Antworten wobei ich aus letzteren Beitrag von Thomas nicht ganz schlau werde...
> 
> das "<- auf enter klicken!" war sicher nicht böse gemeint, als Ich darauf hinwies, ka warum Ich's tat...vestehe deine Reaktion diesbezüglich nicht so ganz aber egal thx für die Antworten...
> ...



Das war mehr als Ratschlag gemeint, weil ich aufgrund deiner Erwähnung davon ausgegangen bin, das du es für als "Hinweis fähig" hälst und meine Überlegung dazu:

Zukünftige Besucher kannst du nicht darauf hinweisen, weshalb ich anrate nochmal zu bedenken ob die "Tunnel-"Einstiegsseite nötig ist!

Und ich habe auch nichts bös' aufgefasst!


----------



## Coranor (27. September 2004)

> _Original geschrieben von Thomas Lindner _
> Das war mehr als Ratschlag gemeint, weil ich aufgrund deiner Erwähnung davon ausgegangen bin, das du es für als "Hinweis fähig" hälst und meine Überlegung dazu:
> 
> *Zukünftige Besucher kannst du nicht darauf hinweisen, weshalb ich anrate nochmal zu bedenken ob die "Tunnel-"Einstiegsseite nötig ist!*
> ...



Ich will eigentlich nur noch was zu dem Gedanken hinzufügen.

Ein Besucher entscheidet innerhalb nur sehr wenigen Sekunden ob er auf der Seite bleibt oder sie gleich wieder wegklickt, findet er dann nicht den "Enter"-Button, dann ist er gleich wieder weg und kommt also erst gar nicht auf Deine HP.

Weiterer Punkt, man kann nur mit Umständen Deine HP also solches (und nicht diese Einstiegsseite) in seine Favoriten aufnehmen, und niemand hat Lust jedes Mal wenn er kommt erst auf "Enter" zu drücken. Sprich damit hast Du weniger regelmäßige Besucher.

Das alles hat, wie Thomas ja schon angeschnitten hat, mit Usability zu tun und sollte man bei seinem Webdesign auch in Betracht ziehen.


----------



## Thomas Lindner (27. September 2004)

@ Coranor :

Danke für die hervorangende Erklärung und somit besseren Verdeutlichung meiner Aussage.

Eigetlich wollte ich genau das sagen, aber da ich nebenbei zu tun habe, habe ich wohl etwas "gekauderwelscht" - aber naja, gibt ja Dolmetscher hier...  

( *ernst gemeint* )


----------



## Coranor (27. September 2004)

@ Thomas

Gern geschehen. Das (sprich die Usability) ist auch eher mein Metier und nicht die eigentliche Frage bezüglich Javascript. Auch ein Grund warum ich mich nicht ins Javascript-Forum traue.


----------



## tribunmaster (27. September 2004)

Aloa

Ja nun habe auch Ich verstanden was gemeint war 
Ich wollte es ja ursprünglich garnicht mit einer Enterseite machen, aber Ich wollte die HP eben inem festen Browserfenster öffnen also so wie es nun ist, keine scrollbars etc..
Dies ist auch wie erwähnt meine 1. erstellte HP, musste mich in alles erstmal reinfummeln, ob nun HTML oder die Flashsachen, deswegen habe Ich noch nicht so sehr die Ahnung was genau geht und was nicht..

Und Ich habe eben mehrfach gelesen das diese Sache mit dem "festen" Browserfenster etc.. nur möglich ist, wenn man eben vorher ne Enterseite hat, welche auf die eigentliche Seite verlinkt..
Oder ist das nen Irrtum und es geht auch anders?

Nochmal zum Thema Buttons, der erwähnte code:
 "<body onLoad="MM_preloadImages('bild01.jpg', 'bild02.jpg')">"

Muss ich da anstelle von ('bild01.jpg', 'bild02.jpg') , "bild01" und "bild01_nach_rollover" eintragen? oder welche Bilder muss ich da eintragen, die ohne Rollovereffekt oder jene mit Rollovereffekt oder wie ? :\ 
Und für jeden Bilderwechsel den selben Code nochmal untereinander oder sämtliche Bildwechsel in diesen einen Code hintereinander?

mfg
Andre


----------



## Coranor (28. September 2004)

Anstatt bild01.jpg,... einfach die Bilder, die eben noch nicht geladen werden beim Start, also alle Bilder des Rollovereffekts. Du kannst in diesen einen Befehl so viele Bilder einbauen wie Du möchtest, einfach beim Schema  *'bild01.jpg'* bleiben und die Bilder per Komma trennen. Auch nicht zu vergessen, die Position des Bildes angeben, falls das Bild nicht im selben Verzeichnis liegt. Nochmal ein anderes Beispiel zur Verdeutlichung:


```
<body onLoad="MM_preloadImages('bilder/rollover01.jpg', 'bilder/rollover02.jpg', 'bilder/rollover03.jpg', 'bilder/rollover04.jpg')">
```

In diesem Fall sind die Rollovereffekte im Verzeichnis "bilder" welches ein Unterverzeichnis des Verzeichnisses ist indem die html-Datei liegt.


----------



## SilentWarrior (28. September 2004)

Und für alle Nicht-Dreamweaver gibt es ein hervorragendes Beispiel bei SELFHTML.


----------



## Coranor (28. September 2004)

> _Original geschrieben von SilentWarrior _
> *Und für alle Nicht-Dreamweaver gibt es ein hervorragendes Beispiel bei SELFHTML. *



Vielleicht bin ich ja blind oder meine Javascript-Kenntnisse nicht ausreichend, aber ich sehe in dem Beispiel keinen Preloader, und um den geht es hier ja und nicht um den Bildaustausch bei mouseover, den hat er ja schon. Also nicht durcheinander bringen und erst recht nicht unseren "Neuling" verwirren


----------



## tribunmaster (28. September 2004)

Aloa

Ich hab festgestellt, das der Code samt Bilder schon im Code vorhanden ist 

<body onLoad="MM_preloadImages('button_andre_effekt.jpg','button_andre_effekt2.jpg','button_andre_effekt3.jpg','button_andre_effekt4.jpg','button_andre_effekt5.jpg','button_andre_effekt6.jpg','button_andre_effekt7.jpg','button_andre_effekt8.jpg')">

Das sind alle Bilder welche bei Rollover ausgelöst werden, ist der Code falsch oder warum habe ich das Gefühl, das wenn Ich auf der Seite über die Buttons gehe, das des ziemlich lang dauert mitn Bildwechsel?!

mfg
Andre


----------



## Coranor (28. September 2004)

Ich kann gerade leider nicht meine rechte Maustaste benutzen (dumme College-Computer hier), daher kann ich nicht in Deinen Quelltext reinschauen.

Die Frage ist, liegen die Bilder auch im selben Verzeichnis wie Deine html-Dateien: 

wenn *nein*, dann musst Du noch den Verzeichnisnamen davor einfuegen und per / mit dem Bildnamen trennen.

wenn *ja*, dann versuch mal die entsprechende Funktion MM_preloadImages aus dem Head-Bereich samt Script-Tags in Deine Startseite zu kopieren und dort die Funktion dann ueber <body onload="MM_preloadImages(...)"> die Bilder vorauszuladen.

Ansonsten bin ich heute Abend wieder daheim und kann mir dann den Quellcode genauer anschauen.


----------



## tribunmaster (28. September 2004)

Aloa

Ja die Bilder sowie die htm's als auch die Flash files's liegen alle im selben Ordner.

Ich habs nun mal selber versucht und die Startseite mit dem Enterbutton soweit abgeändert, der Quelltext schaut nun so aus:

```
<!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=iso-8859-1">
<title>Dance Factory Berlin</title>

<script language="JavaScript" type="text/JavaScript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
//-->
</script>

<style type="text/css">
<!--
body {

	background-color: #000000;
}
.Stil1 {
	font-family: "Mekanik LET";
	font-size: larger;
}
.Stil4 {font-size: 36px}
-->
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>

<body onLoad="MM_preloadImages('button_andre_effekt.jpg','button_andre_effekt2.jpg','button_andre_effekt3.jpg','button_andre_effekt4.jpg','button_andre_effekt5.jpg','button_andre_effekt6.jpg','button_andre_effekt7.jpg','button_andre_effekt8.jpg','button_startseite.jpg','button_angebote.jpg','button kosten.gif','button3.gif','button_galerie.jpg','button5.gif','button_links.jpg','button_kontakt.jpg)">
<div id="Layer1" class="Stil4" style="position:absolute; width:345px; height:433px; z-index:1; left: 190px; top: -14px;">
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="640" height="480">
    <param name="movie" value="logo.swf">
    <param name="quality" value="high">
    <embed src="logo.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="640" height="480"></embed>
  </object>
</div>
<div id="Layer2" style="position:absolute; width:139px; height:52px; z-index:2; left: 437px; top: 468px;">
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="136" height="47">
    <param name="movie" value="fullscreen_browser.swf">
    <param name="quality" value="high">
    <embed src="fullscreen_browser.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="136" height="47"></embed>
  </object>
</div>
</body>
</html>
```


Ich hab in den body tag nun alle Buttons reingehauen die auf der HP zu laden sind, nicht nur die Rolloverbuttons, vorher habe ich es auch nur mit den Rolloverbuttons versucht, wie auch immer Ich sehe nun keinen Unterschied zu vorher bzgl. des Aufbaus der Buttons oder der Reaktion bei Rollover bzw. dessen Geschwindigkeit, ne Ahnung worans liegen könnte? 

mfg
Andre


----------



## SilentWarrior (28. September 2004)

> Vielleicht bin ich ja blind oder meine Javascript-Kenntnisse nicht ausreichend


Letzteres. Sobald die Bildnamen in einer Variablen gespeichert werden, werden sie automatisch preloaded. Du kannst das gerne mal ausprobieren, indem du den Cache deines Browsers leerst und danach das SELFHTML-Beispiel aufrufst.


----------



## Coranor (28. September 2004)

> _Original geschrieben von SilentWarrior _
> *Letzteres. Sobald die Bildnamen in einer Variablen gespeichert werden, werden sie automatisch preloaded. Du kannst das gerne mal ausprobieren, indem du den Cache deines Browsers leerst und danach das SELFHTML-Beispiel aufrufst. *



Das ist allerdings neu für mich, wie gesagt meine Javascript-Kenntnisse sind nicht berauschend. Aber ein Hinweis von Dir gleich beim Posting wäre nützlich gewesen.

Zum eigentlichen Thema, tribunmaster, könntest Du Deine jetzige Version mal online stellen, also mit dem Preloader, dann könnten wir es "live" testen. Gut wäre es dabei auch, wenn die Seite nicht in einem solchen Fenster geöffnet wird, dann kann man sich das alles etwas besser anschauen und eventuell den Fehler besser finden.


----------



## tribunmaster (28. September 2004)

öhm ja...die seite ist ja online ---> http://www.rennmauszucht-berlin.de/index_andre.htm 

mfg
Andre


----------



## Coranor (29. September 2004)

> _Original geschrieben von tribunmaster _
> *öhm ja...die seite ist ja online ---> http://www.rennmauszucht-berlin.de/index_andre.htm
> 
> mfg
> Andre *



Okay, die Seite ist online, aber erstens:

- ich habe sie aber immer noch im Fenster. Das Fenster verhindert mir aber den direkten Zugriff auf die Quelltexte der einzelnen Frames, alles was ich mit Rechtsklick momentan erreiche sind die Frames untitled-3,-14,-15 und -17. Bei sovielen Frames bekomm ich ehrlich zwar den kollaps, aber um das ganze mal genauer anzuschauen, sollte ich schon alle Frames mir separat anschauen können, was aber eben nicht geht. Lass wenigstens die Menüzeile des Fensters mal erscheinen oder gib uns den direkten Link, dann kann man per Ansicht - Quellcode sich den Quellcode des Framesets und sich die passenden Frames rauspicken.

- und zweitens sehe ich in dem Quellcode der Einstiegsseite nicht, dass Du meinen Rat mit dem preloader in der Eingangsseite verwendest. Von daher bin ich davon ausgegangen, dass Du nicht die aktuelle Version online hast. Oder falls Du meinen Rat schon befolgt hast und es keinen Unterschied macht und Du den Preloader deshalb wieder rausgenommen hast, dann könntest Du wenigstens uns Deine Erfahrungen mitteilen.


----------



## tribunmaster (29. September 2004)

Aloa

Also ich habe deinen Rat befolgt, sowohl versucht mit der Enterseite als auch mit der verlinkten, aber sehe bei beiden keine Veränderungen, habe die Seite dann mal aufn anderen Webspace geuppt und da wa der Buttonwechsel dann auch zügiger, also danke nochmal an alle antwortenden für eure Hilfe.

mfg
Andre


----------

