Mouseover Grafik vollständig laden

[FLP22]

Hallo, habe folgenden Mouseover:

Code:
<a href="http://www.bla.de"><img src="images/home.jpg" onMouseOver="this.src='images/homeroll.jpg'" onMouseOut="this.src='images/home.jpg'" border="0">

so, wenn ich die seite öffne, benötigt er erst eine gewisse zeit um alle grafiken zu laden und dazu muss ich auch noch mit dem mauszeiger auf der grafik bleiben.

da ich nicht viel ahnung habe, benötige ich detaillierte hilfe. mir wurde mal gesagt, das man die grafik in einer tabelle einbinden kann und das dann beim laden der webseite alle grafiken sofort mitgeladen werden und nicht erst wenn man mit dem mauszeiger drauf zeigt.

das habe ich bisher noch nicht hinbekommen.

kann mir jemand detailliert erklären was ich machen muss, das die grafiken sofort geladen werden?

[suit]

da ich nicht viel ahnung habe, benötige ich detaillierte hilfe. mir wurde mal gesagt, das man die grafik in einer tabelle einbinden kann und das dann beim laden der webseite alle grafiken sofort mitgeladen werden und nicht erst wenn man mit dem mauszeiger drauf zeigt.

das habe ich bisher noch nicht hinbekommen.

vergiss das mal schnell wieder - fürs Protokoll: mit einem Preloader wär das möglich

kann mir jemand detailliert erklären was ich machen muss, das die grafiken sofort geladen werden?

Vergiss die JavaScript-Lösung und versuch dich an CSS:
http://www.wellstyled.com/css-nopreload-rollovers.html

• kein JavaScript notwendig (funktioniert in praktisch jedem Browser)
• kein preloading nötig
• benötigt weniger Rechenzeit

[Paul]

Moin,
@suit: das mit CSS ist ja ganz toll aber wenn er komplexe Bilder tauschen will die nicht mehr per CSS definiert werden können?

@FLP22: Du könntest die Bilder mit <img src="xyz" style="display:none;"> vorladen. Dann sollten sie auch relativ schnell wechseln.

Paul

[suit]

@suit: das mit CSS ist ja ganz toll aber wenn er komplexe Bilder tauschen will die nicht mehr per CSS definiert werden können?

Kannst du mir ein Beispiel für dein derart komplexes Bild nennen, welches ich zwar in einem <img />-Element notieren kann, nicht aber als url() in der CSS-Eigenschaft background?

@FLP22: Du könntest die Bilder mit <img src="xyz" style="display:none;"> vorladen. Dann sollten sie auch relativ schnell wechseln.

Nein, ein schlauer Browser wird eine Ressource die ohnehin nicht angezeigt wird garnicht erst laden.

Mit JavaScript kann man allerdings ein image-Objekt erzeugen - das ist das übliche vorgehen bie Preloadern mit JavaScript.

Wofür das gut sein soll (außer dass ich damit einige Besucher von diesem visuellen Effekt ausschließe, weiß ich aber immer noch nicht.

[Paul]

Ist es nicht egal ob man bei mouseover das this.src wechselt oder den background des Elements? Wird das Bild bei a:hover {background...} vorgeladen? Wenn ja, ist das natürlich einfacher.

Bisher hatte ich keine Probleme mit display:none.
W3C sagt auch "img { display: none } /* Don't display images */" und nicht "Don't load images" (display:none)
Aber wenn's so sein soll, dann muss man halt visibility:hidden nehmen und das Bild entweder aus dem Sichtfeld schieben oder es ganz klein (height,width) laden.

Paul

[suit]

Ist es nicht egal ob man bei mouseover das this.src wechselt oder den background des Elements?

Jein - die mouseover-Variante funktioniert ohne JavaScript nicht.

Wird das Bild bei a:hover {background...} vorgeladen?

Nein - das hab ich aber in keinem Wort erwähnt. Auch auf der verlinkten Seite wird das nicht so beschrieben.

Bisher hatte ich keine Probleme mit display:none.

Du verwendest selten mobile endgeräte oder? :)

Dennoch erneut meine Frage: warum irgend eine Krücke wenn es eine saubere CSS-Lösung gibt?

[Steel]

Hi!

Jein - die mouseover-Variante funktioniert ohne JavaScript nicht.

Ah. Punkt 4, den ich auf meine rListe nicht habe: Kein JS.

[Steel]

Hi!

Ist es nicht egal ob man bei mouseover das this.src wechselt oder den background des Elements? Wird das Bild bei a:hover {background...} vorgeladen? Wenn ja, ist das natürlich einfacher.

Dir ist das Konzept scheinbar noch nicht ganz klar geworden:
Es wird nur ein einzelnes Bild geladen. Dieses enthaelt jede moegliche Version des Hovereffekts. Es ist also schon da, wenn gehovert wird und nichts wird nachgeladen. Beim Hover (Klick,...) wird das Hintergrundbild schlicht verschoben, so dass die entsprechende Bildversion zu sehen ist. Dieses Verschieben einer Hintergrundgrafik geht schneller als zwei Bilder auszutauschen.

Also:

• Es wird kein Bild gewechselt sondern nur verschoben.
• Da es nur eines gibt, braucht nichts vor- oder nachgeladen werden.
• verschieben geht schneller als Bildressourcen zu wechseln.

[Paul]

Dir ist das Konzept scheinbar noch nicht ganz klar geworden

Stimmt. Vielen Dank.