Lange bei Ladezeiten beim Navibutton hovern

[Alex1990]

Hallo,

ich habe das Problem, dass meine Navibuttons ein wenig lange brauchen, bis sie geladen werden. Wenn man mit der Maus drauf zeigt, dauert es manchmal bis zu 2 Sekunden bis das geänderte Bild angezeigt wird. Was kann ich machen, damit die Grafiken sofort umspringen? Hier mal mein Code.

Die Navigation

<a href="index.html" id="home"></a>

CSS-Datei

/* Startseite */
  a#home {
    float                       :   left;
    width                      :   113px;
    height                     :   50px; 
    background-image     :   url(../graphics/navi/startpage.png);
    border-right             :   1px solid white;
  }
  a#home:hover {
    background-image     :   url(../graphics/navi/a-startpage.png);
  }

Ich hoffe ihr könnt mir helfen!

Viele Grüße
Alex

 

[VeChaRed]

AW: Lange bei Ladezeiten beim Navibutton hovern

ich würde persönlich *.gif nehmen! Weil Png eher für grosse Bilder geeignet ist. Der Code ansich ist gut. Wie gross ist den die Grafik überhaupt

mfg

 

[kuli94]

AW: Lange bei Ladezeiten beim Navibutton hovern

Ich kann empfehlen die beiden Buttons in eine Grafik zu machen und den Hintergrund einfach bei CSS Hover Effekt verschieben lassen... hat den vorteil das die Buttons nicht nachgeladen werden müssen

 

[knispel]

AW: Lange bei Ladezeiten beim Navibutton hovern

Kann man sich das online ansehen? Der Code lässt jedenfalls nicht auf dieses Verhalten schließen, zumal ja solche Grafiken nach dem ersten (Pre)Laden im Cache vorgehalten werden.

Zitat von :

... Weil Png eher für grosse Bilder geeignet ist. ...

Wo steht das?

 

[Alex1990]

AW: Lange bei Ladezeiten beim Navibutton hovern

Eine Grafik ist etwa 4.8 KB groß.. und das summiert sich ja bei 7 Buttons xD Ich werd die Grafiken dann mal bei gelegenheit in .gif umwandeln.. mal sehn was bei raus kommt Danke für die Antwort

Kann man sich das online ansehen?

www.projekt-eule.de

 

[Alex1990]

AW: Lange bei Ladezeiten beim Navibutton hovern

Hab alle PNG's mal in GIF's umgewandelt und auch schon in die CSS eingebunden, allerdings ist kein Geschwindigkeitsschub zu spüren. Die Buttonsgröße Gesamt ist aber schon mal von 100 KB auf 13 KB geschrumpft

 

[knispel]

AW: Lange bei Ladezeiten beim Navibutton hovern

Bei mir werden die Grafiken ohne merkliche Verzögerung angezeigt.

 

[sokie]

AW: Lange bei Ladezeiten beim Navibutton hovern

die Lösung von Kuli94 würde das Problen nun wirklich nachhaltig lösen.
der Wechsel nach *.gif wäre nicht unbedingt nötig gewesen - mit farbenreduzierten png wärst du auf ein ähnliches Ergebnis gekommen.
Übrigens sehe ich den Ladevorgang nur im Internet-Explorer. Bei langsamen Verbindungen würde das natürlich deutlicher auffallen.

 

[kuli94]

AW: Lange bei Ladezeiten beim Navibutton hovern

Wenn ich mich auch recht entsinne kann der IE6 eh keine PNG Grafiken anzeigen oder täusche ich mich da??? Nur mit hack und ich persönlich würde es wenn denn auch ohne Hack machen.

 

[sokie]

AW: Lange bei Ladezeiten beim Navibutton hovern

der ie6 kann nur keine alphatransparenzen bei pngs darstellen.

 

[Outlaw87]

AW: Lange bei Ladezeiten beim Navibutton hovern

PNG geht aber soweit ich weiß nicht im Internet Explorer (nur zur Info)

 

[thomasspeck]

AW: Lange bei Ladezeiten beim Navibutton hovern

PNG geht aber soweit ich weiß nicht im Internet Explorer (nur zur Info)

Das ist so nicht korrekt. IE6 kann png, jedoch keine Alphakanäle. Also ist keine Transparenz damit möglich. Workarounds gehen nur mit JS. Im übrigen komprimiert png8 besser bei besserer Qualität als gif.
Ab IE7 und nun mit dem neuen IE8 gibt es keine Probleme damit.

Da Du 2 Bilder benutzt, muß nach dem Hovern das zweite Bild nachgeladen werden. Je nach Bandbreite kommt es da zu einer Nachdenkpause.
Die Lösung wurde schon genannt:
Ein Bild, das beide Zustände (normal und hover) beinhaltet und beim hovern per CSS verschoben wird. Wer schlau ist, baut sich einen Bildstreifen, der in Quadranten aufgeteilt ist und alle Buttons in allen Zuständen enthält. DIeses Bild wird nun in den Menüpunkten nur noch hin und hergeschoben. Fazit: Ein Bild, Eine Serveranfrage -> schnellstmöglicher Seitenaufbau.
So kann man mit etwas Umsicht auch mit den meisten Hintergrundbildern verfahren, die nicht gekachelt werden sollen.

Hier kannst Du nachlesen: